Run any Skill in Manus with one click

Get Started

design-system

Stars2

Forks0

UpdatedJuly 12, 2026 at 12:09

Make frontend output look intentional, not AI-generated. Use for any UI work — components, pages, layouts.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

YaoYinYing

YaoYinYing/REvoDesign

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

name	design-system
description	Make frontend output look intentional, not AI-generated. Use for any UI work — components, pages, layouts.
when_to_use	building UI, a component, a page, "make this look good"

Design System

Default AI UI is gray, centered, and timid. Don't ship that.

Type — one distinctive display face + one clean body face. Real scale (e.g. 12/14/16/20/28/40), not everything 16px.
Color — one strong accent, a real neutral ramp, intentional contrast. No 5 competing brand colors.
Space — a spacing scale (4/8/12/16/24/32...). Generous whitespace. Align to a grid.
Motion — purposeful only: feedback on action, transitions on state. No decorative bounce.
Hierarchy — one clear focal point per screen. Size, weight, and space do the work, not borders everywhere. Before done: would a senior designer ship this, or does it look like a default Tailwind template? If the latter, push the contrast and the type.

More from this repository

same repository

adversarial-verify

YaoYinYing/REvoDesign

Review a diff against the goal spec assuming the code is BROKEN. The reviewer that lives in the maker's head always agrees with itself — this pulls review into a hostile, separate pass. Invoke after every code change before marking work done.

2026-07-122

authz-check

YaoYinYing/REvoDesign

Verify that an endpoint checks ownership, not just authentication. Use on any handler that reads or mutates user data.

2026-07-122

bisect-regression

YaoYinYing/REvoDesign

Find the exact commit that introduced a bug. Use when something worked before and broke, and you don't know which change did it.

2026-07-122

changelog-from-diff

YaoYinYing/REvoDesign

Turn a set of commits or a diff into a clean, user-facing changelog entry. Use before a release or PR description.

2026-07-122

clean-commits

YaoYinYing/REvoDesign

Turn messy WIP into clean, atomic commits with messages that explain why. Use before opening a PR.

2026-07-122

context-budget

YaoYinYing/REvoDesign

Keep the agent's context lean so accuracy doesn't collapse. Use on long sessions, big files, or when the agent starts hallucinating.

2026-07-122

name	design-system
description	Make frontend output look intentional, not AI-generated. Use for any UI work — components, pages, layouts.
when_to_use	building UI, a component, a page, "make this look good"

Design System

Default AI UI is gray, centered, and timid. Don't ship that.

Type — one distinctive display face + one clean body face. Real scale (e.g. 12/14/16/20/28/40), not everything 16px.
Color — one strong accent, a real neutral ramp, intentional contrast. No 5 competing brand colors.
Space — a spacing scale (4/8/12/16/24/32...). Generous whitespace. Align to a grid.
Motion — purposeful only: feedback on action, transitions on state. No decorative bounce.
Hierarchy — one clear focal point per screen. Size, weight, and space do the work, not borders everywhere. Before done: would a senior designer ship this, or does it look like a default Tailwind template? If the latter, push the contrast and the type.