ia-frontend-design
为前端界面提供视觉设计与美学指导的AI技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ia-frontend-design。 它的用途是：为前端界面提供视觉设计与美学指导的AI技能 完整的 Skill 内容见：https://321skill.com/skills/ia-frontend-design-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我正在设计一个面向年轻用户的SaaS产品仪表盘，希望界面看起来现代、清爽且有活力，请给我一些视觉设计方向。'，它会提供一套包含主色调、辅助色、字体推荐、卡片阴影、间距规范等在内的初步设计语言。或者，当您说：'这个登录页的视觉冲击力不够，如何优化？'，它会分析现有元素并提出增强视觉层次、调整对比度或引入微动效等具体建议。
介绍
本技能专注于解决前端开发中视觉设计与美学风格统一的问题。当您需要构建网页、落地页、仪表盘或Next.js服务端组件等对视觉识别有要求的应用时，它可以提供专业的界面美学指导和设计方向。
使用时，您可以向AI描述您的项目类型、目标用户和期望的视觉风格，AI将基于其训练的设计知识，为您提供配色方案、布局建议、字体搭配、组件视觉规范等具体指导，帮助您快速确立或优化界面的视觉基调。
它非常适合前端开发、UI设计师和全栈开发人员，尤其是在项目初期需要快速确立视觉方向，或在迭代过程中寻求设计优化建议时使用。对于产品经理和项目经理，它也能帮助评估和沟通界面设计的可行性。
建议在明确项目功能需求和用户画像后使用本技能，以获得更具针对性的设计建议。请注意，它提供的是设计指导和方向，而非可直接使用的设计稿或代码，具体实现仍需设计师或开发者完成。
核心特点
与专注于React组件模式或代码测试的前端技能不同，本技能的核心在于纯粹的视觉美学和设计方向指导，填补了前端开发流程中从功能到美观的衔接空白。它不生成代码，而是提供设计语言和视觉规范，帮助建立统一且有吸引力的界面外观。
注意事项
不适合需要生成具体React组件代码、进行单元测试或处理复杂交互逻辑的场景。
常见问题
这个技能能帮我生成CSS代码吗？
不能，它主要提供视觉设计方向和美学指导，如配色、布局、字体等，不直接生成可执行的CSS或组件代码。
和 react-frontend 技能有什么区别？
react-frontend 侧重于React组件模式、代码结构和测试，而本技能专注于界面的视觉设计、美学和整体观感，两者互补。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ia-frontend-design-x-2/raw/index.md 读取 ia-frontend-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ia-frontend-design-x-2/raw/index.md（查看排版版本）