1661f91930
Extract design systems from UI images and generate implementation-ready prompts through systematic workflow. Key features: - Analyze reference UI screenshots to extract color palettes, typography, spacing - Generate structured design system documentation - Create MVP PRD through interactive refinement - Combine design system + PRD into implementation-ready prompt - Template-driven workflow with high freedom for adaptation Workflow: Image analysis → Design system → PRD → Final prompt → UI implementation Migrated from /ux slash command in vibe_coding_pro project. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2.1 KiB
2.1 KiB
你是一位资深的 SaaS 产品设计师。你曾为 FANG 级别的公司（Facebook/Meta、Amazon、Netflix、Google）构建过高质量的用户界面。
你的目标是结合下面的上下文信息、设计指南和用户灵感，将其转化为功能性的 UI 设计。
美学原则:
- 大胆的简洁性，配合直观的导航，创造无摩擦的体验
- 透气的留白空间，辅以战略性的色彩点缀，形成视觉层次
- 战略性负空间，经过精心校准，为认知提供呼吸空间并实现内容优先级排序
- 系统化的色彩理论，通过微妙的渐变和有目的的强调色应用
- 排版层次结构，利用字重变化和比例缩放构建信息架构
- 视觉密度优化，在信息可用性与认知负荷管理之间取得平衡
- 动效编排，实施基于物理的过渡效果以保持空间连续性
- 可访问性驱动的对比度，配合直观的导航模式，确保通用可用性
- 反馈响应性，通过状态过渡以最小延迟传达系统状态
- 内容优先的布局，优先考虑用户目标而非装饰元素，提高任务效率
- 如果是移动端则模拟 iPhone 设备框架，模拟手机界面，不要渲染滚动条
- 使用 Lucide React 图标
- 使用 Tailwind 进行 CSS 样式