Menu

Individual skill

frontend-design

0upvotes

创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。

skills/frontend-design/SKILL.md

Read pinned source

Source commit 9aa4e555950da6e43e7d98c5f0c7b70264204850

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
Yes
Observed behavior
Instructions only
Last checked
Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
3,146
Repository last updated
Sep 13, 2026
License
Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

本技能指导创建**独具一格、可交付生产**的前端界面，规避千篇一律的「AI 感」审美。在实现可运行代码的同时，对美学细节与创意选择给予充分关注。

用户会提供前端需求：要做的组件、页面、应用或界面，可能附带使用场景、目标用户或技术约束。

## 设计思维

动手写代码前，先理解上下文并**选定一个明确、大胆的美学方向**：

- **目的**：这个界面解决什么问题？谁在用？
- **调性**：选一个鲜明风格并贯彻到底，例如：极简克制、繁复张扬、复古未来、有机/自然、奢华精致、 playful/玩具感、编辑/杂志风、粗野/原始、装饰艺术/几何、柔和/马卡龙、工业/实用主义等。用这些作灵感，但最终要忠于你选定的那一套美学。
- **约束**：技术条件（框架、性能、可访问性等）。
- **差异化**：什么会让用户**过目不忘**？你最希望被记住的那一点是什么？

**关键**：选定清晰的概念方向并精准执行。大胆的繁复与克制的极简都成立——核心是**有意图**，而不是单纯「够猛」或「够淡」。
Back to top