ia-frontend-design
前端视觉设计与美学方向指导
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ia-frontend-design。 它的用途是：前端视觉设计与美学方向指导 完整的 Skill 内容见：https://321skill.com/skills/ia-frontend-design-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'请帮我设计一个现代简约风格的登录页面，背景用渐变蓝紫色，居中的卡片式布局，圆角按钮，底部有版权信息。' 它会生成完整的HTML/CSS代码，并附带设计说明，包括颜色、间距、字体选择等细节。
介绍
解决什么问题：在构建网页、落地页、仪表盘、Next.js 服务端组件或任何需要视觉美感的界面时，确保设计风格的统一、美观与用户体验一致性。该技能专注于外观层，而非交互逻辑或测试。
怎么用：将你的设计需求（如色彩、布局、动效、间距等）描述给AI，它会基于现代设计原则生成CSS、HTML结构、设计令牌、组件样式建议，或直接输出完整的页面视觉稿。支持从零开始设计，也可对现有界面进行美化。
适合谁：UI设计师（快速验证设计想法）、前端开发（落地视觉方案）、产品经理（快速产出原型视觉稿）。尤其适合需要兼顾美感与效率的团队。
使用建议：最好配合具体的设计系统（如品牌色、字体等）一起使用，效果更精准。若需React组件逻辑或测试，请使用react-frontend技能。注意：该技能不处理后端数据交互或复杂业务逻辑。
核心特点
与`react-frontend`技能不同，本技能不涉及React模式、组件测试或状态管理，完全聚焦于视觉表现层——从色彩、排版到动效，适合注重“眼睛看到”的界面。
注意事项
不适合需要复杂后端交互、数据处理或React组件逻辑的场景。
常见问题
这个技能能生成完整的UI设计稿吗？
可以，你需要提供设计方向或参考，AI会输出HTML/CSS代码及视觉建议。
和react-frontend有什么区别？
react-frontend侧重React组件开发与测试，本技能专注视觉设计，不涉及组件逻辑。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ia-frontend-design-x/raw/index.md 读取 ia-frontend-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ia-frontend-design-x/raw/index.md（查看排版版本）