skills.rest
AaronZhou-THU
AaronZhou-THUCOMMUNITY
Explore all skills by this author →
GitHub

design

Create HTML/CSS/JS mocks, style guides, and design documentation for web interfaces.

Updated Mar 11, 2026
Search Tags:#typography#design#frontend#style-guide#visual-design#color-palette#ui-prototype
One-click install
npx skills add https://github.com/AaronZhou-THU/OpenAgent --skill design-aaronzhou-thu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/AaronZhou-THU/OpenAgent/tree/main/agent-api/src/agent_service/data/skills/design
Command: npx skills add https://github.com/AaronZhou-THU/OpenAgent --skill design-aaronzhou-thu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams need production-grade frontend visuals and assets that stand out from generic AI aesthetics.

Core Features & Use Cases

  • Bold visual direction to establish a cohesive UI system.
  • Artifact production to generate HTML/CSS/JS mocks, style guides, and visual assets (PDF/PNG) ready for handoff.
  • Use Case: When delivering a new product feature, create a complete UI concept package including typography, color palette, and component specifications.

Quick Start

Produce a complete UI concept package for a login screen with typography, color palette, and component specs.

Frequently Asked Questions about design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a complete UI concept package with typography and color palettes?▼

To generate a UI concept package, define the visual direction and the system outputs cohesive typography, color palettes, and component specifications. It delivers HTML/CSS/JS mocks and style guides for web interfaces.

What is the best way to create handoff-ready frontend visual assets?▼

The best way to create handoff-ready frontend visual assets is to generate production-grade HTML/CSS/JS mocks, style guides, and visual files like PDF or PNG. This ensures outputs stand out from generic AI aesthetics.

Can I build a cohesive style guide and UI prototype from a single prompt?▼

Yes, you can build a cohesive style guide and UI prototype by requesting a complete UI concept package. The system establishes a bold visual direction and outputs component specifications alongside visual assets for web interfaces.

Does this approach work for establishing visual systems for new product features?▼

Yes, this approach works for establishing visual systems for new product features by creating a complete UI concept package. It delivers typography, color palettes, and component specifications tailored for web interface prototypes.

Why do my generated frontend mocks look generic and lack visual cohesion?▼

Frontend mocks look generic when lacking a bold visual direction to establish a cohesive UI system. Applying production-grade visual design principles generates distinctive typography, color palettes, and component specifications.

Related Skills

Explore More Design & Creative Skills→
pingmepipingmepi

pm-stage-01-brief

Generate a structured 7-section product brief from a business statement.

Community
Advanced
tianguzhetianguzhe
1

frontend-design

Generate production-grade frontend interfaces with HTML, CSS, and React components.

Community
Advanced
BradliebsBradliebs

frontend-design

Design and implement production-grade frontend interfaces with typography, color systems, and responsive layouts.

Community
Advanced
tcfialhotcfialho

nexus2-design

Generates static web UI prototypes and editable source from natural-language descriptions and/or reference images.

Community
Advanced