第 1 步：建立统一设计规则
为确保生成的组件风格一致，先定义基础规范：选用 Radix 色板、Lucide 图标集和指定字体家族，设定 8px 网格、24px 圆角、固定文本与控件内边距，限制每组件最多三种字号与字重。
默认白底搭配近黑主色与中性灰辅助色，同时明确层级原则：突出单一焦点，信息分组清晰，次要内容弱化，图标比例统一，为 AI 提供清晰但不僵化的创作框架。
第 2 步：撰写开放式组件提示
在提示中明确组件功能与内容，如旅行预算卡需展示总预算、四项分类（含图标、支出、分配、进度条）及日期信息，指定尺寸比例（略高略宽），但不指定元素位置与布局方式。
保留 Astra 对排布、重点强调和视觉节奏的自主权，只要符合已定规则即可，从而在一致性与多样性之间取得平衡。
第 3 步：通过迭代优化规则
生成首个组件后观察结果，发现间距、对齐或图标适配问题，随即细化提示中的规则，逐步加入对间距、字体层级和图标容器关系的明确要求。
这个过程是动态的：规则不是一次性设定，而是随着生成结果不断打磨，使后续输出更符合预期，提升整体质量。
第 4 步：引入动态元素增强体验
在基础组件上，通过链接外部资源实现进阶效果：使用 Paper Shaders 添加材质感，Procedural Sounds 加入交互音效，Transitions.dev 实现流畅转场。
这些功能可直接通过链接或终端安装集成，无需从零开发，快速为组件注入视觉与交互层次感。
常见问题与延伸建议
Astra 消耗 tokens 极快，建议在规则稳定后批量生成，避免反复试错。生成后建议用 Paper 或 Figma 的 Chrome 扩展将组件导入，手动调整细节，实现 AI 生成与人工精修的结合。
此流程适合快速原型验证，尤其适合需批量生成相似结构但内容多变的组件场景。
要点速览
- 用基础规则统一风格，但保留布局自由度，平衡一致性与多样性。
- 提示中明确内容与目标，但避免指定具体排版，让 AI 自主发挥。
- 生成后立即导入 Paper 或 Figma，利用扩展实现快速编辑与迭代。
- 通过外部资源链接，轻松集成动态效果如材质、音效与转场。
- 规则应随生成结果迭代优化，形成持续改进的设计流程。
