来源：@Whizz_ai
刚才看到这篇神贴，必须分享给大家。博主亲测在 118 分钟内交付了一个 $5000 级的网站。 核心思路是用 Claude Opus 4.6（负责逻辑/架构）配合 Figma Make（负责像素级 UI/交互）。他测试了上百个 Prompt，筛选出 9 个真正能落地的，我把它们翻译整理了一下：
🔥核心 Prompt 1：架构策略师角色：Vercel 首席架构师 任务：为 [网站类型] 规划技术规格。 输出：网站地图、用户流程、数据模型、API 需求、组件清单、技术栈推荐。 价值：这是交给 Figma Make 的“施工图纸”，确保结构稳固。
🎨核心 Prompt 2：设计系统生成器角色：Apple 设计总监 任务：为 [品牌] 创建设计系统。 输出：色彩调色板、排版规范、间距系统、组件规范（含状态）、布局模式。 格式：JSON 设计令牌 + CSS 变量。 价值：让 AI 产出的 UI 具备像素级的一致性。
✍️核心 Prompt 3：内容架构师角色：奥美转化文案 任务：撰写 Hero 区块、特性介绍、社交证明、FAQ 等所有文案。 技巧：注入情感触发词，明确 H1/H2 层级。
🛠️进阶 Prompt 清单（查漏补缺）：**- 组件逻辑构建器（交互逻辑）
- Figma Make 提示词工程师（翻译成 Figma 能懂的语言）
- 动画与交互设计师（加载/悬停效果）
- 响应式行为策略师（移动端适配）
- 数据集成规划器（CMS/API 对接）
- QA & 优化清单（性能/SEO 检查）
💡智库点评：**这套组合拳的威力在于「分工明确」。Opus 解决逻辑和结构，Figma Make 解决视觉和实现。以前建站要一周，现在只需要一套好的 Prompt。
建议收藏备用！#AI建站 #ClaudeOpus #FigmaMake
附件：9个完整 Prompt (中英对照)
Claude Opus 4.6 + Figma Make 全套提示词
简介
这是一个包含了 9 个精心设计的 Claude Opus 4.6 和 Figma Make 提示词的集合，旨在帮助您在短时间内构建出高质量的网站。
1. 架构策略师 (The Architecture Strategist)
说明: 负责定义网站的整体结构、用户旅程、技术栈和性能指标。
PROMPT 1: The Architecture Strategist You are a Principal Architect at Vercel. I need to build a [WEBSITE TYPE: portfolio/saas/e-commerce]. Requirements:
- Target audience: [DESCRIBE]
- Key features: [LIST 3-5]
- Tech considerations: [RESPONSIVE/SEO/PERFORMANCE] Deliver:
- Site map (all pages with hierarchy)
- User flows (3 primary journeys)
- Data models (if dynamic content)
- API requirements (if applicable)
- Component inventory (30+ components needed)
- Page templates (wireframe descriptions)
- Technical stack recommendation
- Performance budgets (load time targets)
- SEO structure (meta templates, URL patterns) Format as a technical specification I can hand to Figma Make.
2. 设计系统生成器 (The Design System Generator)
说明: 基于品牌属性创建完整的视觉设计系统，包括颜色、字体、间距和组件规范。
PROMPT 2: The Design System Generator You are a Design Director at Apple. Create a design system for [BRAND]. Brand attributes: [MINIMAL/BOLD/LUXURY/PLAYFUL] Generate:
- Color palette (primary, secondary, semantic, dark mode)
- Typography scale (9 levels with font recommendations)
- Spacing system (8px base grid)
- Component specs (30 components with states)
- Layout patterns (responsive breakpoints)
- Animation guidelines (easing, duration)
- Accessibility requirements (WCAG AA) Export as:
- Design tokens (JSON)
- CSS variables
- Figma-ready component descriptions I'll paste this into Figma Make to generate the visual system.
3. 内容架构师 (The Content Architect)
说明: 专注于为网站撰写所有转化导向的文案，包括标题、描述、CTA和社交证明。
PROMPT 3: The Content Architect You are a Conversion Copywriter at Ogilvy. Write all copy for a [WEBSITE TYPE]. Brand voice: [PROFESSIONAL/CASUAL/BOLD] Target: [AUDIENCE] Goal: [CONVERSION/AWARENESS/RETENTION] Deliver for each page:
- Hero section (headline: 6 words, subhead: 15 words, CTA)
- Feature sections (3 blocks with headlines + descriptions)
- Social proof (testimonial framework + stats)
- FAQ section (8 questions with answers)
- Footer (navigation, social, legal) Formatting instructions:
- Use emotional triggers (urgency, scarcity, authority)
- Include power words (exclusive, proven, instant)
- Specify character counts for each element
- Note which text should be H1, H2, body I'll use this to populate Figma Make's content layers.
4. 组件逻辑构建器 (The Component Logic Builder)
说明: 设计交互式组件的内部逻辑，涵盖状态管理、数据流和错误处理。
PROMPT 4: The Component Logic Builder You are a Frontend Architect. Design the logic for these interactive components: Components needed:
- Multi-step form (validation, progress, state management)
- Dynamic pricing calculator (inputs, formulas, real-time updates)
- Search with filters (faceted search, sorting, pagination)
- User dashboard (data visualization, CRUD operations)
- Authentication flow (login, signup, password reset) For each component:
- State machine diagram (describe in text)
- Data flow (props, events, API calls)
- Error handling strategy
- Loading states
- Empty states
- Edge cases Generate React component structure (functions, hooks, handlers). I'll describe this logic to Figma Make to build the interactive prototypes.
5. Figma Make 提示工程师 (The Figma Make Prompt Engineer)
说明: 将技术规范转化为适用于Figma Make的五种不同提示，以生成具体设计。
PROMPT 5: The Figma Make Prompt Engineer You are an AI Prompt Engineer specializing in Figma Make. Convert this technical specification into 5 Figma Make prompts: [PASTE SPEC FROM CLAUDE] Each prompt must:
- Start with the outcome (not the process)
- Include brand context (colors, typography, mood)
- Specify interactions (hover, click, scroll, animate)
- Define responsive behavior (mobile/tablet/desktop)
- Request specific sections (hero, features, CTA, footer) Example format: "Build a [TYPE] website with [MOOD] aesthetic. Use [COLOR] primary and [FONT] typography. Include: 1) Hero with [SPECIFIC ELEMENTS], 2) Features grid with [INTERACTIONS], 3) [CTA TYPE] section. Make it fully responsive with [ANIMATION STYLE] animations." Generate 5 variations from simple to complex.
6. 动画与交互设计师 (The Animation & Interaction Designer)
说明: 规划网站的加载动画、滚动行为、悬停效果和点击过渡，提升用户体验。
PROMPT 6: The Animation & Interaction Designer You are a Motion Designer at Apple. Design interactions for [WEBSITE SECTION]. Interaction requirements:
- Page load sequence (stagger, duration, easing)
- Scroll behaviors (parallax, pin, reveal)
- Hover states (micro-interactions, feedback)
- Click transitions (page transitions, modal opens)
- Gesture support (swipe, pinch, pull) Technical specs:
- Easing curves (spring, ease-out, cubic-bezier)
- Durations (ms for each interaction type)
- Performance considerations (GPU acceleration, will-change) Describe the animations in words Figma Make can interpret: "On scroll: Navbar shrinks from 80px to 60px with ease-out over 300ms. Hero text fades up from 20px below with 0.6s duration and 0.1s stagger between lines..." I'll paste these descriptions into Figma Make's prompt.
7. 响应式行为策略师 (The Responsive Behavior Strategist)
说明: 设定不同设备的断点，并为每个页面部分定义响应式布局和内容适应规则。
PROMPT 7: The Responsive Behavior Strategist You are a Responsive Design Specialist. Plan breakpoints for [WEBSITE]. Breakpoints:
- Mobile: 375px
- Tablet: 768px
- Desktop: 1440px For each page section, define:
- Layout transformation (grid → stack, sidebar → drawer)
- Typography scaling (font sizes at each breakpoint)
- Image behavior (crop, scale, hide, swap)
- Navigation adaptation (hamburger, sidebar, horizontal)
- Spacing adjustments (padding, margin, gap)
- Content prioritization (hide secondary content on mobile) Create a responsive decision matrix: Section | Mobile | Tablet | Desktop | Notes Figma Make will use this to generate fluid layouts.
8. 数据集成规划师 (The Data Integration Planner)
说明: 设计网站的数据模型、API接口、身份验证和缓存策略，以实现动态内容。
PROMPT 8: The Data Integration Planner You are a Full-Stack Architect. Design data integration for [WEBSITE TYPE]. Data sources:
- [CMS/API/DATABASE] Requirements:
- Data models (schema definitions)
- API endpoints needed (GET, POST, PUT, DELETE)
- Authentication strategy (JWT, OAuth, API keys)
- Real-time considerations (WebSockets, polling)
- Caching strategy (CDN, local storage)
- Error handling (fallbacks, retries, offline) User-facing features:
- Dynamic content loading (infinite scroll, pagination)
- Form submissions (validation, success/error states)
- User accounts (profiles, preferences)
- Search functionality (indexing, filters, sorting) Figma Make connects to Supabase for real data—design the schema for this integration.
9. 质检与优化清单 (The QA & Optimization Checklist)
说明: 提供一份全面的质量保证清单，涵盖性能、可访问性、SEO和兼容性，用于网站迭代。
PROMPT 9: The QA & Optimization Checklist You are a QA Engineer at Google. Review this website specification: [PASTE FIGMA MAKE OUTPUT OR DESCRIBE] Checklist: □ Performance (Core Web Vitals targets) □ Accessibility (WCAG 2.2 AA compliance) □ SEO (meta tags, structured data, sitemap) □ Security (HTTPS, CSP, input sanitization) □ Browser compatibility (Chrome, Safari, Firefox, Edge) □ Mobile optimization (touch targets, viewport) □ Analytics integration (events, goals, funnels) For each issue:
- Severity (Critical/High/Medium/Low)
- Location (page/section/component)
- Issue description
- Fix recommendation Generate a punch list for the Figma Make iteration.
