{"id":51614851,"url":"https://github.com/0xmhha/claude-design-skill","last_synced_at":"2026-07-12T12:03:29.753Z","repository":{"id":357089041,"uuid":"1234677802","full_name":"0xmhha/claude-design-skill","owner":"0xmhha","description":"Claude Code design skill — hi-fi prototyping, Figma MCP-driven precision edits, Codex / gpt-image-2 illustrations, supply-chain gates. Apache-2.0 clean-room rewrite.","archived":false,"fork":false,"pushed_at":"2026-05-22T08:55:25.000Z","size":20279,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-22T15:51:32.819Z","etag":null,"topics":["agent-skill","claude-code","codex-cli","design-skill","figma","gpt-image-2","supply-chain-security","web3-design"],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0xmhha.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":"NOTICE","maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-10T13:56:10.000Z","updated_at":"2026-05-22T08:55:30.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/0xmhha/claude-design-skill","commit_stats":null,"previous_names":["0xmhha/claude-design-skill"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/0xmhha/claude-design-skill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xmhha%2Fclaude-design-skill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xmhha%2Fclaude-design-skill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xmhha%2Fclaude-design-skill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xmhha%2Fclaude-design-skill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xmhha","download_url":"https://codeload.github.com/0xmhha/claude-design-skill/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xmhha%2Fclaude-design-skill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35391314,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-12T02:00:06.386Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent-skill","claude-code","codex-cli","design-skill","figma","gpt-image-2","supply-chain-security","web3-design"],"created_at":"2026-07-12T12:03:29.255Z","updated_at":"2026-07-12T12:03:29.747Z","avatar_url":"https://github.com/0xmhha.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# claude-design-skill\n\n[![License: Apache 2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](LICENSE)\n[![sanitizers](https://github.com/0xmhha/claude-design-skill/actions/workflows/sanitizers.yml/badge.svg)](https://github.com/0xmhha/claude-design-skill/actions/workflows/sanitizers.yml)\n\n\u003e Claude Code-based design skill for hi-fi prototyping and Figma MCP-driven precision design work.\n\u003e **Status: Step 1–7 shipped · v1.0.0 (2026-05-12) · clean-room rewrite, no upstream skill inherited.**\n\u003e Step 5 promoted `team-brand-spec` from placeholder to operational default (evidence-anchored to an 11-service style sweep) and added a Figma → spec extractor.\n\u003e CI: GitHub Actions on every push and PR. 18 + 13 + 19 + 19 + 11 + 13 + 15 = **108 regression tests** across the seven sanitizer / engine / fork-helper / Figma-extractor / Figma-viewer suites; 16 prebuilt visual showcases under `assets/showcase-brand/generated/`.\n\n\u003e 🟡 **If you're an AI agent picking this repo up in a fresh session, read [`HANDOFF.md`](HANDOFF.md) FIRST.** It contains the project context, the user's working style, the anti-patterns to avoid, and the decision tree for the next move. Skipping it costs tokens.\n\n## What this is\n\nA skill package for Claude Code (and any markdown-skill-capable agent) that turns a design brief into hi-fi HTML prototypes, Figma-driven precision edits, and brand-correct illustrations through Codex CLI + gpt-image-2 — with security gates baked in at every boundary.\n\nThree load-bearing rules govern every external call:\n\n1. **Fact verification before assumptions.** WebSearch is the first action on any unfamiliar product, version, or release date. No memory-based factual claims.\n2. **Confidentiality gate before any external call.** Internal codenames, NDA partners, unreleased products never leave the local agent — not via WebSearch, not via Codex CLI, not via image-gen prompts. Pattern table in `references/security-config.md §1.5`.\n3. **Strip-then-scan import gate** for every external asset. SVGs go through whitelist sanitize + CSP + visibility comment. PNGs go through chunk scan + AI metadata strip. Sanitizer rejection is never silent — every reject lands in PROVENANCE.\n\n## What's in here\n\n```\nclaude-design-skill/\n├── HANDOFF.md                        # ⭐ READ FIRST in a new session — context briefing + anti-patterns\n├── QUICKSTART.md                     # 🚀 15-minute walkthrough — individual / team / read-only paths\n├── docs/\n│   └── plan/                         # 9-doc implementation plan via /buddy:plan-build (overview · DAG · timeline · buddy mapping)\n├── SKILL.md                          # main agent doc — workflows, App / Slide / Anti-slop / Junior Designer / Tweaks / Critique sections\n├── README.md                         # this file\n├── LICENSE                           # Apache-2.0\n├── NOTICE                            # required by Apache §4(d) — clean-room rewrite attribution\n├── SECURITY.md                       # vulnerability disclosure policy (private advisories)\n├── CONTRIBUTING.md                   # fork operator / security reporter / rare-PR paths\n├── CHANGELOG.md                      # release log\n├── PROJECT-PLAN.md                   # decision log\n├── .gitignore                        # also names the showcase-pack exception\n├── .claude-plugin/\n│   ├── plugin.json                   # Claude Code plugin manifest\n│   └── marketplace.json              # single-plugin marketplace (mirror for team-local marketplace)\n├── .github/\n│   ├── workflows/\n│   │   └── sanitizers.yml            # CI on every push + PR\n│   └── dependabot.yml                # auto-update pinned GitHub Actions weekly\n├── .githooks/\n│   └── pre-commit                    # opt-in local equivalent: SVG sanitize + asset scan on staged files\n├── references/                       # task-specific guides\n│   ├── security-config.md            # allowlist · WebSearch policy · Codex policy · codename pattern catalog\n│   ├── svg-sanitize.md               # XXE guard · whitelist · CSP · visibility comment\n│   ├── production-boundaries.md      # prototype ↔ production migration table\n│   ├── codex-design-workflow.md      # GPT-5.5 + gpt-image-2 with strip-then-scan import\n│   ├── figma-workflow.md             # Figma MCP hub\n│   ├── figma-selection-aware.md      # confirm what 'this layer' is before editing\n│   ├── figma-layer-naming.md         # rename Frame 47 → semantic\n│   ├── figma-component-grouping.md   # detect repeats and promote to components\n│   ├── figma-brand-spec-import.md    # Figma → team-brand-spec.json\n│   ├── brand-spec-fields.md          # field reference for team-brand-spec.default.json\n│   ├── ci-template.md                # live GitHub workflow + alternate-platform snippets\n│   ├── design-styles.md              # 18-direction design philosophy catalog (14 fresh + 4 game/web3 carry-over)\n│   ├── scene-templates.md            # 9 output-type templates (5 fresh + 4 game/web3 carry-over)\n│   ├── animation-engine.md           # \u003cStage\u003e / \u003cSprite\u003e reference + worked examples\n│   ├── animation-best-practices.md   # 5-tier timing scale, easing selection, stagger, reduced-motion\n│   ├── animation-pitfalls.md         # 14 anti-patterns with why-bad / symptom / fix\n│   ├── web3-game-style-stats.md      # 11-service evidence sweep behind the default values (Step 5.2)\n│   ├── figma-to-brand-spec.md        # REST → team-brand-spec.json extractor reference\n│   ├── figma-viewer.md               # REST → self-contained HTML viewer reference\n│   ├── figma-mcp-setup.md            # MCP server install + PAT + detection contract\n│   ├── figma-image-export.md         # Codex PNG → Figma placement (MCP-aware + manual fallback)\n│   └── figma-page-organization.md    # page / section / folder organization (sibling of componentization)\n├── scripts/\n│   ├── svg-sanitize.py               # whitelist-based SVG sanitizer (stdlib only)\n│   ├── test_svg_sanitize.py          # 18 regression tests\n│   ├── scan_assets.py                # PNG chunk + JPG segment scanner (stdlib only)\n│   ├── test_scan_assets.py           # 13 regression tests\n│   ├── codex-image-import.py         # Codex PNG → strip caBX → scan → import (with conservative-pairing codename catalog)\n│   ├── test_codex_image_import.py    # 19 regression tests\n│   ├── test_animations_easing.js     # 19 regression tests for the Easing pack (Node, stdlib only)\n│   ├── init-brand.py                 # fork-bootstrap helper — stamps a per-team brand-spec carrier\n│   ├── test_init_brand.py            # 11 regression tests\n│   ├── figma-to-brand-spec.py        # Figma → team-brand-spec.json extractor (REST API + offline fixture mode)\n│   ├── test_figma_to_brand_spec.py   # 13 regression tests\n│   ├── figma-viewer.py               # Figma file → self-contained HTML viewer (offline-capable)\n│   ├── test_figma_viewer.py          # 15 regression tests\n│   ├── fixtures/                     # offline test fixtures (Figma API response shape)\n│   └── install-hooks.sh              # opt-in pre-commit hook installer\n├── assets/\n│   ├── team-brand-spec.default.json  # operational default spec (Step 5.1, evidence-based)\n│   ├── ios_frame.jsx                 # iPhone 15 Pro / Pro Max device frame\n│   ├── android_frame.jsx             # Pixel 8 / 8 Pro device frame\n│   ├── deck_stage.js                 # \u003cdeck-stage\u003e 1920×1080 web component\n│   ├── tweaks.js                     # \u003ctweak-panel\u003e live design-tuning controls\n│   ├── animations.jsx                # Stage / Sprite timeline engine\n│   ├── easing.js                     # 14-curve frozen Easing pack (CommonJS + window)\n│   ├── default-brand/                # Default Studio placeholder SVGs — mark · inverse · wordmark · icon (sanitiser-clean)\n│   └── showcase-brand/\n│       ├── README.md                 # 16-cell preview catalog (scene × philosophy matrix)\n│       ├── PROVENANCE.md             # 213-line audit trail for the 16 showcase PNGs\n│       └── generated/                # 16 prebuilt visual demos (gpt-image-2)\n└── examples/\n    ├── dot-claude-settings.json      # drop-in Claude Code permissions baseline\n    ├── tweaks-demo.html              # runnable \u003ctweak-panel\u003e example\n    └── README.md                     # how to wire up the settings\n```\n\nRun the full guard chain locally:\n\n```bash\npython3 scripts/test_svg_sanitize.py        # 18/18\npython3 scripts/test_scan_assets.py         # 13/13\npython3 scripts/test_codex_image_import.py  # 19/19\nnode    scripts/test_animations_easing.js   # 19/19\npython3 scripts/test_init_brand.py          # 11/11\npython3 scripts/test_figma_to_brand_spec.py # 13/13\npython3 scripts/test_figma_viewer.py        # 15/15\npython3 -c \"import json; json.load(open('examples/dot-claude-settings.json'))\"\npython3 -c \"import json; json.load(open('assets/team-brand-spec.default.json'))\"\n```\n\nGitHub Actions runs the same chain on every push and PR.\n\n## Quick start\n\nFor a **15-minute walkthrough** with individual / team / read-only paths, see [`QUICKSTART.md`](QUICKSTART.md). The short version:\n\n```bash\n# Clone (or fork-mirror to your internal git host)\ngit clone https://github.com/0xmhha/claude-design-skill ~/skills/claude-design-skill\ncd ~/skills/claude-design-skill\n\n# Verify your env can run every gate the CI runs (108 tests, ≈30s)\npython3 scripts/test_svg_sanitize.py \u0026\u0026 \\\npython3 scripts/test_scan_assets.py \u0026\u0026 \\\npython3 scripts/test_codex_image_import.py \u0026\u0026 \\\nnode    scripts/test_animations_easing.js \u0026\u0026 \\\npython3 scripts/test_init_brand.py \u0026\u0026 \\\npython3 scripts/test_figma_to_brand_spec.py \u0026\u0026 \\\npython3 scripts/test_figma_viewer.py\n\n# Smoke the Figma viewer without any token / account\npython3 scripts/figma-viewer.py --fixture scripts/fixtures/figma_viewer_sample.json --output /tmp/viewer.html\nopen /tmp/viewer.html\n\n# Drop the skill into your design project (NOT into the skill repo)\ncd /path/to/your-design-project\nmkdir -p .claude\ncp ~/skills/claude-design-skill/examples/dot-claude-settings.json .claude/settings.json\n$EDITOR .claude/settings.json   # remove the _template_meta block\n\n# Stamp the operational default brand spec into your project root\npython3 ~/skills/claude-design-skill/scripts/init-brand.py\n$EDITOR team-brand-spec.json   # override identity slots\n```\n\n**Plugin install** (Claude Code marketplace path):\n\n```bash\n# Adds the skill as a one-line install when running from any directory\nclaude plugin marketplace add 0xmhha/claude-design-skill\nclaude plugin install claude-design-skill\n```\n\nThen talk to your agent (Claude Code, Cursor, Trae, or any markdown-skill-capable host):\n\n```\n\"Pull the brand colors from this Figma library and update team-brand-spec.json\"\n\"Componentize this Figma file — too many ad-hoc rounded buttons\"\n\"Generate a hero image for our staking flow with codex\"\n\"Sanitize this external SVG before I inline it\"\n```\n\n## What ships (vs what's intentionally out of scope)\n\n**In the box (Step 1–4 shipped, 2026-05-10):**\n- Security gates · sanitizers · Figma MCP routing · Codex CLI bridge with strip-then-scan import (Step 1)\n- SKILL.md body: Junior Designer workflow · Anti-AI-slop checklist (12 patterns) · App prototype rules (`\u003cIosFrame\u003e` + `\u003cAndroidFrame\u003e`) · Slide deck conventions (`\u003cdeck-stage\u003e`) · Tweaks live-tuning system (`\u003ctweak-panel\u003e`) · Critique guide (6 dimensions, threshold rule, worked critique) (Step 2)\n- Design knowledge catalog: 18-direction design philosophy catalog · 9 scene templates · Stage / Sprite animation engine + 14-curve Easing pack · animation best-practices + pitfalls · 16 prebuilt visual showcases (Step 3)\n- Internal-fit hardening: codename pattern catalog with conservative-pairing rule · GitHub Actions CI · external asset hosts whitelist (Step 4)\n\n**Intentionally out of scope:**\n- **Sound effects (Step 3.5)** — retired by user instruction 2026-05-10. This project is visual-only; deliverables that need sound source it per-deliverable rather than vendoring an SFX pack here.\n- **Internal brand integration (Step 4 fork-specific)** — `team-brand-spec.json` real values, internal codenames added to the pattern list, internal asset hosts added to the allowlist. These are per-fork actions; the templates live in this repo (`references/brand-spec-fields.md`, `references/security-config.md §1.2`, `scripts/codex-image-import.py:DEFAULT_CODENAME_PATTERNS`).\n\n## License\n\n**Apache License 2.0**, recorded in `LICENSE`. Per Apache §4(d), the\nattribution `NOTICE` file ships alongside.\n\nThis repository is a **clean-room rewrite**. No third-party design skill\nis inherited — every file is either authored from scratch by the project\nmaintainer or is the maintainer's own prior fork-author work\n(\u003chttps://github.com/0xmhha/huashu-design\u003e, Phase 1–4.2). The 23 carry-over files are\nenumerated in `PROJECT-PLAN.md §2`; the verbatim game / web3 domain\nsections inside `references/design-styles.md §15–18` and\n`references/scene-templates.md §06–09` are similarly maintainer-original\nwork, documented in `PROJECT-PLAN.md §7`.\n\nThe upstream \u003chttps://github.com/alchaincyf/huashu-design\u003e skill carries a separate\nPersonal-Use license. This repository does **not derive from** the\nupstream, so the upstream license is unaffected by the Apache 2.0 grant\nrecorded here. The license was changed from MIT to Apache 2.0 on\n2026-05-10 to gain the explicit patent grant (Apache §3) and the\ncontributor / trademark clarity (Apache §6) that MIT does not provide.\n\nIf a fork operator needs a different license (internal-only,\nsource-available, etc.), replace `LICENSE` and `NOTICE` before any\nexternal publication.\n\n## Roadmap\n\n- **Step 1 (2026-05-09)** — skeleton: security gates, sanitizers, Figma MCP routing, Codex bridge, Android frame.\n- **Step 2 (2026-05-09 → 05-10)** — SKILL.md body authored: Junior Designer workflow · Anti-AI-slop checklist · App prototype rules + IosFrame · Slide deck conventions + deck_stage.js · Tweaks live-tuning system + tweaks.js + worked example · Critique guide.\n- **Step 3 (2026-05-10)** — Design knowledge catalog: design-styles.md (18 directions) · scene-templates.md (9 templates) · animation engine (animations.jsx + easing.js + 19 regression tests) · animation best-practices + pitfalls · 16 showcase PNGs. (Step 3.5 SFX library retired by user instruction.)\n- **Step 4 (2026-05-10)** — Internal-fit hardening: codename catalog conservative-pairing rule · GitHub Actions CI active · external asset hosts whitelist boost. Internal brand spec values + LICENSE / mirror policy remain per-fork actions.\n- **Step 5 (2026-05-11)** — Operational defaults + Figma ingestion: `team-brand-spec.default.json` replaces the placeholder example with evidence-anchored values from an 11-service style sweep (`references/web3-game-style-stats.md`); `scripts/figma-to-brand-spec.py` lets adopters extract their spec from Figma instead of hand-editing JSON.\n- **Step 6 (2026-05-12)** — Figma support hardening: `scripts/figma-viewer.py` (self-contained HTML viewer for review-without-Figma), `references/figma-mcp-setup.md` (MCP server install + detection contract), `references/figma-image-export.md` (Codex PNG → Figma placement), `references/figma-page-organization.md` (page / section / folder organization, sibling of componentization).\n- **Next** — designer dogfooding pass · per-fork brand integration when a team adopts the skill.\n\n## Contributing\n\nInternal R\u0026D. External contributions are not currently sought. If you\nhave a fix or improvement, read [`CONTRIBUTING.md`](CONTRIBUTING.md)\nfirst — it covers the fork-operator path, the security-reporter path,\nand the rare-PR path.\n\nFor security regressions in the sanitizer / scanner / import-gate /\ncodename catalog stack, use GitHub's private security advisories\n(see [`SECURITY.md`](SECURITY.md)) rather than opening a public issue.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xmhha%2Fclaude-design-skill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xmhha%2Fclaude-design-skill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xmhha%2Fclaude-design-skill/lists"}