特色前端界面构建助手

特色前端界面构建助手

这个 Skill 能做什么

根据项目简报推导合适的设计方向并构建不依赖通用模板的落地页、作品集和产品界面。

完成任务时重点处理：

• 从内容、受众和品牌推导风格
• 结构、字体、图片和组件的整体系统
• 改版审计、实现质量和交付前检查

最终目标不是堆出一份看似完整的内容，而是交付能够直接使用、继续修改并清楚验收的结果。

什么时候使用

• 需要从零设计前端或审查现有方案中的模板感与通用生成痕迹。
• 用户需要根据项目简报推导合适的设计方向并构建不依赖通用模板的落地页、作品集和产品界面。
• 任务需要同时控制从内容、受众和品牌推导风格、结构、字体、图片和组件的整体系统。

如果简报过短时先从内容与用户任务推导一套保守方向并标记假设，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 产品目标、用户任务与页面范围 2. 代码仓库、技术栈和现有组件 3. 品牌资料、参考方向与禁用模式 4. 响应式、可访问性、性能和测试约束 5. 项目简报、真实内容、用户任务和主要行动 6. 技术栈、资产、参考、约束与现有实现

信息不必一次问完。先检查用户已经提供的材料，只追问会明显改变结果的问题。

执行步骤

1. 读懂项目

明确产品类别、用户、语境、信任需求和不适合的风格。

2. 调节设计维度

分别决定表达强度、信息密度和运动程度。

3. 建立独特系统

从字体、网格、色彩、图像和组件关系形成识别。

4. 先做关键样板

完成首屏或核心任务页，使用真实内容检查方向。

5. 构建完整界面

扩展组件、响应式、状态和必要动画。

6. 执行反模板预检

逐项检查默认卡片、无关渐变、重复布局和空泛文案。

输出格式

至少交付以下内容：

• **设计方向**：项目判断、视觉系统和反例
• **前端实现**：可运行页面、组件和响应式样式
• **预检报告**：模板感、内容适配、状态和技术验证

所有文件使用能说明内容和版本的名称。若任务包含执行动作，还要记录执行状态、验证结果和可继续处理的材料。

完整示例

创作者作品集不使用常见居中英雄加三卡片，而以作品索引、编辑排版和大幅过程图建立个人识别。

合理处理顺序：

1. 读懂项目 2. 调节设计维度 3. 建立独特系统 4. 先做关键样板 5. 构建完整界面 6. 执行反模板预检

交付时应重点展示设计方向、前端实现、预检报告，并说明尚未验证的部分。

质量检查清单

• [ ] 核心用户任务比修改前更容易发现和完成
• [ ] 组件、字体、颜色和间距形成一致系统
• [ ] 手机、平板、桌面和关键交互状态均已检查
• [ ] 功能、性能、SEO 和可访问性没有意外回退
• [ ] 最终风格能够从项目内容解释而来
• [ ] 页面不依赖空泛文案和占位图片维持设计效果

信息不足时怎么处理

• 不能运行项目时只做静态审计，并明确未验证项目。
• 需求冲突时优先保护核心任务和现有业务功能。
• 简报过短时先从内容与用户任务推导一套保守方向并标记假设。