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-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我正在设计一个金融科技仪表盘，需要专业、可信且现代的视觉风格，请提供一些设计方向。'，它会为你提供色彩方案建议（如深蓝色系搭配金色点缀）、布局原则（数据卡片化、信息层级清晰）以及字体选择（使用无衬线字体提升可读性）等综合美学指导。
介绍
该技能专注于解决前端开发中视觉设计统一性和美观性的问题。它帮助开发者在构建网页、落地页、仪表盘或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-5/raw/index.md 读取 ia-frontend-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ia-frontend-design-x-5/raw/index.md（查看排版版本）