Design Master

August 20, 2026 · View on GitHub

English | 简体中文

Website Sponsor

Author website · X · Bilibili · YouTube · Sponsor

Design Master is a resource-first AI designer plugin. It researches relevant references and extracts an executable design system before generating responsive pages, HTML presentations, dashboards, motion experiences, or selective 3D. It then applies a unified review across visual quality, UX, accessibility, responsiveness, and performance.

The user only needs to provide the goal, content, images, and data. Design Master automatically selects reference sources, derives the design system, chooses justified engines, generates the artifact, and runs quality checks. Users do not need to request each step separately.

Version 0.1.0 establishes the foundation. It is not a template generator that forces animation and 3D into every page.

Implemented

  • Source, version, dependency, and license audits for the six required open-source Skills
  • Integration boundaries for Claude Design, Open Design, and four frontend engines
  • A queryable index of international and Chinese design resources
  • A human-readable design-resource guide that also works as a bookmark collection
  • A prompt pipeline covering reference research, design DNA, generation, Skill packaging, and editing
  • Unified routing for pages, decks, dashboards, motion, and 3D
  • Conditional integration recipes for ECharts, GSAP, Spline, and Three.js
  • Quality gates covering design taste, UI/UX, accessibility, responsiveness, and performance
  • An executable engine planner and JSON Schemas

Structure

.codex-plugin/plugin.json       Codex plugin manifest
skills/design-master/           Main Skill, references, schemas, and scripts
docs/RESOURCE_RESEARCH.md       Resource research report
docs/UPSTREAMS.lock.json        Pinned upstream versions and licenses
THIRD_PARTY.md                  Third-party integration and redistribution boundaries

Usage

After installing it as a Codex plugin, try prompts such as:

  • “Build a landing page for my AI product.”
  • “Turn this content into a 12-slide launch presentation with real charts.”
  • “Redesign this page using the supplied URL and screenshot as references.”
  • “Review and improve this existing website.”

The research, design-system extraction, engine selection, and quality review happen automatically when required.

Run the deterministic engine planner:

python3 skills/design-master/scripts/plan_artifact.py request.json --pretty

See the resource research report for the complete audit.

Design resource guide

The resource library can also be used independently as a categorized bookmark and discovery guide:

Principles

  • Reuse proven resources without disguising license-incompatible code as original work.
  • Establish the reference-derived design system before implementation.
  • Do not add animation, charts, or 3D unless the content justifies them.
  • Do not invent data to create a false sense of sophistication.
  • Keep editing and playback isolated so exported artifacts remain clean.

No separate product site is required for this repository. The public face of the work is the author website, this GitHub repo, and the projects below.

Project pagehttps://guojiz.github.io/design-master/
Author websitehttps://guojiz.github.io/
Xhttps://x.com/guojizh
Bilibilihttps://space.bilibili.com/3493114115263006
YouTubehttps://youtube.com/@guojizh
Sponsorhttps://github.com/Guojiz/Sponsors

Other open-source projects

License

Original content in this repository is licensed under MIT. Third-party projects and runtimes retain their respective licenses; see THIRD_PARTY.md.