YaoApp/designer

Latest recorded source activity: June 11, 2026 at 00:53

SkillsMP catalog refreshed: November 5, 2026 at 19:57

skills collected: 8

GitHub stars: 0
GitHub forks: 0

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/YaoApp/designer.

Repository README

Repository README source: README.md

Read the source README

Expand full README

# Designer `smith.designer` — AI-powered visual design and prototyping agent for web, app, and poster design projects. Give it a design brief ("SaaS admin dashboard with enterprise blue theme") and it plans the full project: picks a color palette, sets up typography, scaffolds HTML pages from templates, generates a design-spec.css token file, and serves it all with live reload via preview server. ## How to install Send this repo URL to Agent Smith: > Install the designer agent from https://github.com/YaoApp/designer.git Agent Smith reads the files, deploys them, and `smith.designer` appears in your agent list ready to use. ## What's inside | Layer | Files | | ------------- | ------------------------------------------------------- | | Config | `package.yao`, `sandbox.yao`, `prompts.yml` | | Locales | `locales/en-us.yml`, `locales/zh-cn.yml` | | Tests | `tests/inputs.jsonl`, `tests/ctx.json` | | Skills | `skills/*/SKILL.md` | ### Skills (8) | # | Skill | What it does | | --- | --------------------- | --------------------------------------------- | | 1 | `project-planning` | Collect requirements, match design library, output blueprint | | 2 | `project-management` | Create project.yml, directory layout, medium separation | | 3 | `page-management` | Create/edit/list HTML pages from design templates | | 4 | `color-palette` | Generate standard YAML palettes from built-in library, URLs, or trends | | 5 | `design-spec` | Generate design-spec.css from palette YAML, handle web/app/poster | | 6 | `font-management` | Install/list/recommend fonts from 11 seed typefaces + Google Fonts | | 7 | `global-conventions` | Cross-project defaults for fonts, viewport, CSS rules | | 8 | `preview-server` | Start/stop preview server with live reload at port 3000 | ## Architecture ``` User request → project-planning → DESIGN.md (blueprint) ↓ project-management → project.yml + dirs ↓ page-management → HTML pages from templates ↓ color-palette → palette.yml (standard YAML) ↓ design-spec → design-spec.css (CSS tokens) ↓ font-management → fonts on demand ↓ preview-server → live preview at port 3000 ``` ## Design workspace Everything goes under `$WORKDIR/design-works/{project-name}/`: ``` design-works/ {project-name}/ DESIGN.md # Blueprint (generated in planning) project.yml # Project metadata design-spec.css # CSS custom properties (auto-generated) pages/ # HTML pages .cache/assets/ # On-demand GitHub registry cache .library/ # Reusable palettes and design schemes .conventions.yml # Global cross-project defaults ``` ## Relationship to `YaoApp/design-assets` This repo (`YaoApp/designer`) is the **agent** — the code that orchestrates the design workflow. The sibling repo [`YaoApp/design-assets`](https://github.com/YaoApp/design-assets) is the **content registry** — the raw design assets the agent pulls at runtime. | Repo | Role | Ships | |------|------|-------| | `YaoApp/designer` | Agent logic | `package.yao`, `prompts.yml`, `sandbox.yao`, 8 skills | | `YaoApp/design-assets` | Content registry | 28 design schemes, 31 color palettes, 11 typefaces, 14 HTML templates, preview-server dist | At startup the agent downloads `INDEX.md` (~5 KB) from `design-assets` to discover what's available. When a user picks a palette, font, or template, the agent fetches just that asset on demand and caches it locally. Nothing is bundled — the agent stays lean, assets iterate independently.

Loading the repository README…

Skills in this repository

Software Developers Graphic Designers Web Developers

3 occupation categories · 100% classified

skill

occupation

description

updated

preview-server

Software Developers

Preview server — download, start, stop, and control the design preview with live reload at port 3000

2026-06-11

color-palette

Graphic Designers

Color palette management — generate standard YAML palettes from built-in library, external search, URL extraction, or traditional Chinese colors

2026-06-10

design-spec

Graphic Designers

Manage design-spec.css — match resource library, handle medium differentiation (web/app/poster), auto-learn from completed projects

2026-06-10

font-management

Software Developers

Font management — list, install, remove, and recommend fonts from 11 seed typefaces + Google Fonts

2026-06-10

global-conventions

Software Developers

Manage global design conventions — .conventions.yml for fonts, viewport, CSS rules, HTML rules, images, and typography defaults

2026-06-10

page-management

Web Developers

Create and manage HTML pages from design templates — web, app, and poster mediums

2026-06-10

project-management

Software Developers

Create and manage design project structure — project.yml, directory layout, and medium separation (web/app/poster)

2026-06-10

project-planning

Software Developers

Guide the user through design project planning — collect requirements, match design library, output DESIGN.md blueprint

2026-06-10

Showing 8 of 8 collected skills.