菜单
Design theory and principles — grid systems, proportional logic, dynamic composition, color science, and concept-driven strategy. Use when defining layout systems, building palettes, planning brand strategy, or auditing composition and visual energy.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | design-theory |
| description | Design theory and principles — grid systems, proportional logic, dynamic composition, color science, and concept-driven strategy. Use when defining layout systems, building palettes, planning brand strategy, or auditing composition and visual energy. |
Foundational design theory covering grid systems, dynamic composition, color science, and concept-driven strategy.
The grid is the visual grammar of the page — strategic support for composition, not decoration.
| Component | Role |
|---|---|
| Margins | Container; prevent cramping |
| Columns | Equal width; images spanning N columns relate mathematically to single-column text |
| Gutters | 12–18pt standard. <12pt fails as separator; >18pt disconnects |
| Hang lines | Horizontal anchors; without them, imagery and text "bounce" |
Grid stretches/contracts; proportional relationships and hierarchy stay constant across devices.
Composition bridges idea and message. A successful layout must: attract attention, deliver a clear message, and communicate story/tone.
| Element | Impact |
|---|---|
| Thicker lines | Importance, attention, texture, boundary |
| Rounded shapes | Softness, calm, stability |
| Sharp/angular shapes | Assertiveness, agility, energy |
| Repeated shapes | Recognizable language, familiarity |
Color is a strategic tool for functional requirements and brand personality.
| Type | Character | Use |
|---|---|---|
| Complementary | Max dynamism, contrast | Bold, balanced presence |
| Analogous | Cohesion, harmony | Soothing, unified layouts |
| Triadic | Diversity + consistency | Varieties within one family |
| Monochromatic | Depth, contemporary | Restricted palettes |
The concept is the "soul" and "roadmap" — the North Star that prevents creative drift.
Every creative decision must pass through the central idea. Root the "why" in a story, feeling, or "big idea"; then define the audience.
Translate the central concept into a visual and tactical roadmap:
Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
Automate browser interactions, test web pages and work with Playwright tests.
Advanced guidelines and best practices for writing tests using Vitest. Apply this skill when generating, reviewing, or refactoring test codes to prevent common pitfalls and ensure high performance.
Fixed 1536×864 touch viewport — grid, margins, 8px rhythm, touch targets, typography, components, vertical rhythm, and QA checklist for panel/kiosk/HMI. Use when designing or implementing UIs for this resolution with touch-first input.
Lists available Cursor agents (planner, architect, tdd-guide, code-reviewer, security-reviewer, build-error-resolver, e2e-runner, refactor-cleaner, doc-updater) and when to use each. Use when the user asks which agent to use, how to delegate work, or what agents are available.
Async parallelization patterns — Promise.all, waterfall prevention, dependency-based parallelism, RSC component composition, deferred await. Use when optimizing async operations, API routes, or data fetching.
