frontend-design
Installation
SKILL.md
Frontend Design
此 skill 指导创建独特、生产级的前端界面,避免通用的"AI slop"美学。实现真正可工作的代码,注重美学细节和创意选择。
用户提供前端需求:要构建的组件、页面、应用程序或界面。可能包含关于目的、受众或技术约束的上下文。
设计思维
在编码之前,理解上下文并确定一个大胆的美学方向:
- 目的:这个界面解决什么问题?谁使用它?
- 风格:选择一个极端:残酷的极简主义、混乱的最大化主义、复古未来主义、有机/自然、奢华/精致、玩具般的趣味、编辑/杂志风格、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/功利主义等等。有很多风格可供选择。以此为灵感但设计一个符合美学方向的真正方案。
- 约束:技术要求(框架、性能、可访问性)。
- 差异化:是什么让这令人难忘?人们会记住的一件小事是什么?
关键:选择一个清晰的概念方向并精确执行。大胆的最大化主义和精致的极简主义都可以工作——关键是有意性,而不是强度。
然后实现可工作的代码(HTML/CSS/JS、React、Vue 等):
- 生产级且功能完整
- 视觉上令人难忘且独特
Related skills
More from wyc7758775/aglie-person-manage
fullstack-developer
现代 Web 开发专家,覆盖 React、Node.js、数据库和全栈架构。用于构建 Web 应用、开发 API、创建前端、设置数据库、部署 Web 应用,或当用户提及 React、Next.js、Express、REST API、GraphQL、MongoDB、PostgreSQL 或全栈开发时使用。
11smart-commit
智能分析 git diff,根据相同业务逻辑将更改分为多个 commit,生成符合最佳实践的 commit message(带 Emoji 图标),并推送到远程分支。
10code-reviewer
用于代码审查。支持本地更改(已暂存或工作树)和远程 Pull Requests(通过 ID 或 URL)。专注于正确性、可维护性和项目标准遵守。
9openspec
OpenSpec 规范驱动开发工作流。用于创建变更提案、实现变更、归档已完成变更。触发词:proposal、change、spec、创建提案、实现变更、归档变更。
1