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-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我正在为一个金融科技公司设计一个数据仪表盘，需要专业、可信且现代的视觉风格，主色调希望是深蓝色系，请提供设计方向和组件美学建议。’，它会根据你的需求，提供包括色彩搭配、字体选择、间距规范、图表样式以及整体布局在内的视觉设计指南，帮助你构建符合品牌形象的用户界面。
介绍
该技能专注于解决前端开发中视觉设计统一性与美学表现力不足的问题。当开发者需要构建注重品牌形象和视觉体验的网页、落地页、仪表盘或Next.js应用时，它能提供专业的设计方向和建议，确保界面美观、风格一致。
使用时，开发者只需向AI描述项目背景、目标用户和功能需求，该技能便会生成相应的视觉设计指南、配色方案、排版建议和组件美学规范。它尤其擅长处理Next.js服务器组件的视觉呈现，帮助开发者将设计理念转化为具体的实现方案。
该技能非常适合前端开发、UI设计师以及全栈开发者在进行视觉密集型项目开发时使用。无论是从零开始构建新界面，还是优化现有页面的视觉体验，它都能提供专业的指导。
建议在使用时，先明确项目的品牌调性和核心功能，以便获得更精准的设计建议。需要注意的是，它主要提供美学方向，不涉及具体的React组件实现模式或代码测试，这部分应结合其他技能完成。
核心特点
与专注于React模式或代码测试的前端技能不同，本技能的核心在于提供纯粹的视觉设计和美学指导，尤其针对Next.js服务器组件等现代前端架构的视觉呈现进行优化，帮助建立和维护清晰、一致的视觉身份。
注意事项
不适用于需要编写具体React组件代码、进行单元测试或处理复杂交互逻辑的场景。
常见问题
这个技能能帮我写React组件代码吗？
不能，它专注于视觉设计和美学指导，具体的React组件实现和测试建议请使用专门的React技能。
适合用来设计移动应用界面吗？
主要针对Web页面、仪表盘和Next.js应用，对于移动应用界面设计，其原则可参考，但可能需要结合移动端特定规范。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ia-frontend-design-x-7/raw/index.md 读取 ia-frontend-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ia-frontend-design-x-7/raw/index.md（查看排版版本）