findscripter 何时使用
- 用 Google Stitch（Google Labs 出品、Gemini 2.5 Flash 驱动的实验性 UI 生成器）把文字描述或草图/截图转成 Web、移动端界面时。
- 需要规划多屏 App 流程、响应式布局，并导出到 HTML/CSS、Figma 或代码片段时。
- 现有界面要做定向迭代（注释微调、生成变体、渐进细化）时。
不该用的边界：
- 不要把 Stitch 产出当成可直接上线的成品——它是起点，需人工重构、补无障碍属性、优化资源后才能生产。
- 不负责手写/实现交互动效与框架代码，也不替代环境内的测试与专家评审。
- 输入、权限、安全边界或验收标准缺失时，先停下来问清，不要硬编。
步骤
- 定位与上下文：一句话写清「为谁、做什么屏/组件」，如「SaaS 分析平台的仪表盘」。
- 列关键功能：用要点列出组件与具体细节（指标卡、折线图、活动流、快捷按钮）。
- 定视觉风格：色板（主色+点缀色）、设计调性（极简/现代/玻璃拟态/活泼）、排版、留白密度。
- 指定平台与响应式：移动/平板/桌面/响应式，必要时给断点（如 320px→1440px）。
- 补功能要求：按钮动作、表单校验、导航模式、加载态、空态、错误处理。
- 生成并确认：多屏时 Stitch 会在生成前请你确认，核对后再产出。
- 迭代：注释微调 →（按需）生成变体 → 渐进细化。
- 导出与收尾：核对断点、对比度、交互态、命名后导出，再做生产级重构。
指令
提示词模板：
[屏/组件类型] for [用户/场景]
Key Features:
- [功能1，含具体细节]
- [功能2，含具体细节]
- [功能3，含具体细节]
Visual Style:
- [色彩方案]
- [设计调性]
- [布局方式]
Platform: [Mobile/Web/Responsive]
核心原则（务必遵守）：
- 越具体越好：泛泛的提示得到泛泛的结果。
- 永远带视觉方向：色板 + 调性 + 布局，避免「AI 味」通用输出。
- 多屏用要点逐屏列清。
- 善用设计术语：hero section、card layout、glassmorphic、bento grid、kanban，帮 Stitch 准确理解意图。
- 描述交互态（hover、点击、过渡）让设计更完整。
- 拆成可复用组件思考（header、card、form）。
示例
有效 vs 无效（对照）：
✗ Create a dashboard
✓ Member dashboard with course modules grid, progress tracking bar,
and community feed sidebar using purple theme and card-based layout
完整模板示例：
Dashboard for SaaS analytics platform
Key Features:
- Top metrics cards showing MRR, active users, churn rate
- Line chart for revenue trends (last 30 days)
- Recent activity feed with user actions
- Quick action buttons for reports and exports
Visual Style:
- Dark mode with blue/purple gradient accents
- Modern glassmorphic cards with subtle shadows
- Clean data visualization with accessible colors
Platform: Responsive web (desktop-first)
多屏流程：
Fitness tracking app with:
- Onboarding screen with goal selection
- Home dashboard with daily stats and activity rings
- Workout library with category filters
- Profile screen with achievements and settings
迭代三招：
- 注释微调（annotate to edit）：「Make this button larger and use primary color」「Add more spacing between these cards」——只改注释区域，无需重写整条提示。
- 生成变体：「Generate 3 variants of this hero section: 1. Image-focused 2. Text-heavy 3. Video background」。
- 渐进细化：先
E-commerce homepage，再Add featured products section with 4-column grid and hover effects，再调色板与 banner。
反模式 → 改法：
✗ Make a nice website
✓ Portfolio website for photographer with full-screen image gallery,
project case studies, and contact form. Minimalist black and white
aesthetic with serif typography.
注意事项
- 导出前：核对响应式断点、色彩对比度（无障碍）、交互态是否定义、组件命名与结构。
- 导出后：按生产标准重构代码、补语义化 HTML 与 ARIA/alt、优化图片资源、补动效与微交互。
- 导出格式：HTML/CSS（语义化标记）、Figma（Paste to Figma 接入设计系统）、组件级代码片段。
- 典型工作流：Stitch → Figma → 代码（设计系统交付）；Stitch → HTML → React/Vue/Svelte 组件。
- 多断点（移动/平板/桌面）都要验证；在提示里就提及对比度、字号、触控目标尺寸等无障碍要求。
- 记住：Stitch 加速探索与确定视觉方向，最终仍需人的判断与生产标准把关。
互见
- 创意/misc 域内的视觉与原型类技能。
- Figma、前端框架（React/Vue/Svelte）相关组件落地技能。
采编自 sickn33/antigravity-awesome-skills（MIT License）。