Super UI UX Design
syahiidkamil/Software-Engineer-AI-Agent-Atlas
Complete UI/UX design capability — a wiki-style knowledge map of design theory (UX laws, Nielsen heuristics, usability, visual hierarchy, typography, contrast/WCAG, design systems…
Turns a short brief into a researched, distinctive website: lock the intent with at most one question, research live reference sites, source materials, then build and verify.
Install Design-Led Website Builder
$ npx skills add liucongg/liucong-skills --skill design-led-website-builder -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install liucongg/liucong-skills design-led-website-builder --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/liucongg/liucong-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design-led-website-builder .claude/skills/design-led-website-builder && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-led-website-builder" agent skill from https://github.com/liucongg/liucong-skills/tree/main/skills/design-led-website-builder into .claude/skills/design-led-website-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-led-website-builder", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/liucongg/liucong-skills/tree/main/skills/design-led-website-builderType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add liucongg/liucong-skills --skill design-led-website-builder -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install liucongg/liucong-skills design-led-website-builder --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/liucongg/liucong-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design-led-website-builder .agents/skills/design-led-website-builder && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-led-website-builder" agent skill from https://github.com/liucongg/liucong-skills/tree/main/skills/design-led-website-builder into .agents/skills/design-led-website-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-led-website-builder", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add liucongg/liucong-skills --skill design-led-website-builder -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install liucongg/liucong-skills design-led-website-builder --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/liucongg/liucong-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design-led-website-builder .cursor/skills/design-led-website-builder && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-led-website-builder" agent skill from https://github.com/liucongg/liucong-skills/tree/main/skills/design-led-website-builder into .cursor/skills/design-led-website-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-led-website-builder", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/liucongg/liucong-skills.git --path skills/design-led-website-builder--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add liucongg/liucong-skills --skill design-led-website-builder -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install liucongg/liucong-skills design-led-website-builder --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/liucongg/liucong-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design-led-website-builder .gemini/skills/design-led-website-builder && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-led-website-builder" agent skill from https://github.com/liucongg/liucong-skills/tree/main/skills/design-led-website-builder into .gemini/skills/design-led-website-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-led-website-builder", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install liucongg/liucong-skills design-led-website-builderInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add liucongg/liucong-skills --skill design-led-website-builder -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/liucongg/liucong-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design-led-website-builder .github/skills/design-led-website-builder && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-led-website-builder" agent skill from https://github.com/liucongg/liucong-skills/tree/main/skills/design-led-website-builder into .github/skills/design-led-website-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-led-website-builder", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add liucongg/liucong-skills --skill design-led-website-builder -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install liucongg/liucong-skills design-led-website-builder --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/liucongg/liucong-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design-led-website-builder .opencode/skills/design-led-website-builder && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-led-website-builder" agent skill from https://github.com/liucongg/liucong-skills/tree/main/skills/design-led-website-builder into .opencode/skills/design-led-website-builder/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-led-website-builder", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-led-website-builder- GitHub stars
- 248
- Token cost
- ~1.3k tokens
- SKILL.md length
- 670 words
- Files
- 30 (incl. scripts, references, assets)
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Turns a short brief into a researched, distinctive website: lock the intent with at most one question, research live reference sites, source materials, then build and verify.
- Works in 4 steps: Ingest — two kinds of raw material → Lock intent (before research) → Research sites, then hunt materials → …
- Building a new website from a short description
- SKILL.md covers Pipeline (do not reorder), Stop conditions (hard), 1. Ingest — two kinds of raw… and 2. Lock intent (before research), plus 3 more sections
- Runs JavaScript scripts from its folder; calls uv
What it does
From a thin brief (who it is, why the site exists, what it must show), or a brand kit, named style, reference URL or screenshot, the agent follows a fixed pipeline: ingest, lock intent, research, hunt materials, report back, build and verify. If the brief could mean more than one product, it asks one question round and waits; otherwise it skips the question. It never asks more than once, apart from a later rights question before publishing someone else's photo or a real price.
Research looks at live sites that match the locked intent, and the materials hunt covers licensed or generated textures, open art and editorial images, not fake portraits, so the result is never a type-only page. The agent then returns a short summary of direction, three site references, materials sourced and what it will not copy, builds in the same turn and checks the result against a quality rubric. With a brand it keeps the brand, and without one it invents a system from purpose, content and taste cues. It is for new sites and redesigns, not bug fixes or copy edits.
When your agent uses it
- Building a new website from a short description
- Redesigning a site with research into comparable live sites
- Starting a site from a screenshot or reference URL
Example prompts
- “Build a site for my ceramics studio: handmade mugs, a small shop and a story page.”
- “Redesign our research lab's homepage; I will paste the current URL.”
- “Make a portfolio site for a street photographer in the style of the screenshot I attached.”
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit d08416a. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
uv
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use uv, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Design-Led Website Builder loads about 1.3k tokens when it runs, and up to ~33k if it reads all its reference files. Until then it costs about 120 tokens; SKILL.md has 670 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from liucongg/liucong-skills at commit d08416a, republished under its Apache-2.0 licence (© liucongg). 670 words, ~1,333 tokens.
Download SKILL.mdSave it as
.claude/skills/design-led-website-builder/SKILL.md (or your agent's skills folder). This skill also uses 29 other files; get the full folder from GitHub.- name
- design-led-website-builder
- description
- Turn a thin brief (who, why, what to show) into a distinctive researched website. If the brief could mean more than one product, ask once to lock intent and wait. Then research matching live sites, hunt licensed or generated materials (textures, open art, editorial photos — not fake portraits), and build. Skip the ask when the job, a style, a URL/screenshot, or a brand already settles it. Use for new sites and redesigns, not bug fixes or copy edits.
Design Led Website Builder
A short brief is enough. Lock intent, wait, research that job, hunt materials, then build. Ask at most once.
Typical input: who they are, why the site exists, what it must show. Also accept a brand kit, a named style, a reference URL, or a screenshot.
This document is English. Talk to the user in their language. Ask_user options follow the user's language.
People arrive differently. Some bring a brand. Some bring a name and a few pieces of content. Same pipeline; different raw material. Read intake.
Pipeline (do not reorder)
- Ingest the brief and notice the raw material (brand / no brand / a reference).
- Lock intent before any research. If the brief can mean more than one product, send one
ask_userround and stop until they reply. If intent is already singular, skip. - Research live sites that match the locked intent. Read research pass.
- Hunt materials in the same research turn. Read visual evidence and assets. Find licensed or generated textures, open art, and editorial images. Do not ship a type-only page.
- Return 8–12 lines: direction, three site references, materials sourced, what you will not copy, what you will build.
- Build in the same turn. Read brief to direction, visual craft, design-to-build.
- Verify with the quality rubric.
Do not substitute a schedule, dossier, or interview for the website. Do not keep operating and asking at the same time.
Stop conditions (hard)
At most one question round in the whole job (plus a later rights question only if you are about to publish someone else’s photo or a real price).
If you already asked once, the next move is research or code.
1. Ingest — two kinds of raw material
| They brought | What you do |
|---|---|
| A brand — name, logo, colors, existing site, guidelines | Keep it. After intent is locked, research peers in that category. Do not invent a second identity. |
| No brand — a person or project, some content, maybe a taste cue | After intent is locked, invent a distinctive system from purpose + content + cue. Do not stall for a brand kit. |
Also capture why, what to show, and any already-given lock (style, URL, screenshot).
Show full SKILL.md (307 more words)Show less
2. Lock intent (before research)
List the 2–4 products this brief could be. If more than one is plausible, ask once. Options come from this brief, not a fixed menu.
Typical forks (examples, not a checklist to dump):
| They said | Could mean |
|---|---|
| blog / personal site | Publishing site (write, read, archive) or visually driven personal site |
| company site / homepage | Product site, company brochure, recruiting, or brand film |
| portfolio | Case-study studio, image index, or spatial/motion piece |
| landing page | Waitlist, sales, or story |
| premium / beautiful / more designed | Still need the job: what is the site for? |
Each option is a product with a consequence, plus I have a reference (next message: URL or screenshot).
Skip the ask when intent is already singular. After sending the question: wait. Then research that job only.
3. Research sites, then hunt materials
Open three to five live sites that match the locked intent. User-supplied URL or screenshot is reference #1.
Then collect 3–8 production materials (paper, wood, texture, licensed still life, original illustration). Proof of the named person still waits on their files. Atmosphere does not. CSS rings and empty slots are not materials.
uv run --with pyyaml --python 3.11 python scripts/catalog.py match \
--scenario editorial --style editorial --component galleryVisual evidence: protocol. Audit example: Gionatan Nese. Worked path: thin brief.
4. Return, then build
Name the direction, the site references, and the materials you put on disk. Then implement. Two different briefs must not share type, color, and layout.
Hard rules
- Intent is locked before research. Research follows the lock.
- Ask once, then stop until they answer. Do not research in parallel with the question.
- Hunt materials. Type-only first builds fail.
- User reference and brought brand beat catalog guesses.
- Do not copy signature layouts, type, copy, or assets.
- Do not invent customers, metrics, awards, portraits, or a career.
- Missing proof (their photo, their work): high-fidelity labeled slots. Missing materials: you failed the hunt.
- Do not overwrite unrelated user work.
© liucongg, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 29 other files (scripts, references, assets) in skills/design-led-website-builder of liucongg/liucong-skills.
- SKILL.md
- agents/openai.yaml
- assets/e2e-fixture/app.js
- assets/e2e-fixture/index.html
- assets/e2e-fixture/styles.css
- pyproject.toml
- references/brief-to-direction.md
- references/design-taxonomy.md
- references/design-to-build.md
- references/example-audit-gionatan-nese.md
- references/example-dossier-ai-research.yaml
- references/example-reference-pass-ai-research.md
- references/example-thin-brief.md
- references/forward-tests.yaml
- references/intake.md
- references/quality-rubric.md
- references/research-pass.md
- … and 13 more
Open the folder on GitHubat commit d08416a
Compare with similar skills
Design-Led Website Builder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design-Led Website Builder this skillliucongg/liucong-skills | 248 | — | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| Super UI UX Designsyahiidkamil/Software-Engineer-AI-Agent-Atlas | 401 | — | ~9k | Automated safety check: Pass | None | |
| Frontend DesignYYH211/Claude-meta-skill | 282 | 1 repos | ~2.2k | Automated safety check: Pass | MIT | |
| Frontend DesignJetBrains/skills | 366 | 129 repos | ~1.2k | Automated safety check: Pass | Apache-2.0 | |
| Premium UI Revampbuildfastwithai/gen-ai-experiments | 785 | — | ~2k | Automated safety check: Pass | MIT | |
| Product Appeal Analyzercuriositech/some_claude_skills | 244 | — | ~2.4k | Automated safety check: Pass | MIT |
Similar skills
Frontend Design
YYH211/Claude-meta-skill
Creates unique, production-grade frontend interfaces with exceptional design quality.
- Official
Frontend Design
JetBrains/skills
Create distinctive, production-grade frontend interfaces with high design quality.
Premium UI Revamp
buildfastwithai/gen-ai-experiments
Audit and revamp existing web interfaces into polished, professional, product-specific experiences while preserving behavior and working within the current frontend stack.
Product Appeal Analyzer
curiositech/some_claude_skills
Evaluate product desirability, market positioning, and emotional resonance—the complement to friction analysis.
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
More from liucongg/liucong-skills
Traceable Model Evaluation
liucongg/liucong-skills
Sets up and runs side-by-side model evaluations with frozen questions, isolated tools and traceable results, using your own question bank or benchmark subsets.
Painterly 3D2 Cinema Prompts
liucongg/liucong-skills
Expands one sentence into a prompt package for painterly 3D-to-2D short films: story, 15-second segments, characters, scenes, Midjourney storyboards and Seedance video prompts.
LLM Wiki Operations
liucongg/liucong-skills
Maintains an LLM Wiki in a Feishu knowledge base: initial setup, ingesting sources and articles, answering queries, health checks and entry upkeep.
WeChat Article Title Strategist
liucongg/liucong-skills
Generates, rewrites, critiques and ranks titles for Chinese WeChat official account articles, grounded in the article's real content and any history data supplied.
Related
Categories
Questions about Design-Led Website Builder
What does Design-Led Website Builder do?
Turns a short brief into a researched, distinctive website: lock the intent with at most one question, research live reference sites, source materials, then build and verify. From a thin brief (who it is, why the site exists, what it must show), or a brand kit, named style, reference URL or screenshot, the agent follows a fixed pipeline: ingest, lock intent, research, hunt materials, report back, build and verify. If the brief could mean more than one product, it asks one question round and waits; otherwise it skips the question.
When should I use Design-Led Website Builder?
Design-Led Website Builder fits situations like: building a new website from a short description; redesigning a site with research into comparable live sites; starting a site from a screenshot or reference URL.
How do I install Design-Led Website Builder in Claude Code?
Run `npx skills add liucongg/liucong-skills --skill design-led-website-builder -a claude-code`. Or copy the skill folder (skills/design-led-website-builder in liucongg/liucong-skills) into .claude/skills/design-led-website-builder in your project. Claude Code loads it when a task matches its description.
How do I install Design-Led Website Builder in Codex?
Run `npx skills add liucongg/liucong-skills --skill design-led-website-builder -a codex`. Or copy the skill folder (skills/design-led-website-builder in liucongg/liucong-skills) into .agents/skills/design-led-website-builder in your project. Codex loads it when a task matches its description.
Can I use Design-Led Website Builder in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add liucongg/liucong-skills --skill design-led-website-builder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-led-website-builder, .gemini/skills/design-led-website-builder, .github/skills/design-led-website-builder and .opencode/skills/design-led-website-builder in your project.
What does Design-Led Website Builder need to run?
Going by SKILL.md and its folder, Design-Led Website Builder needs JavaScript for the scripts in its folder and the command-line tools its instructions call (uv).
Does Design-Led Website Builder access the network?
SKILL.md contains no URLs. Its commands use uv, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Design-Led Website Builder safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Design-Led Website Builder use?
Design-Led Website Builder is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design-Led Website Builder use?
About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 32k tokens, read only when the agent opens those files.
What are the alternatives to Design-Led Website Builder?
Skills that share tags, products or a category with Design-Led Website Builder: Super UI UX Design (syahiidkamil/Software-Engineer-AI-Agent-Atlas, 401 stars), Frontend Design (YYH211/Claude-meta-skill, 282 stars), Frontend Design (JetBrains/skills, 366 stars) and Premium UI Revamp (buildfastwithai/gen-ai-experiments, 785 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design-Led Website Builder?
liucongg (a GitHub user) maintains it in liucongg/liucong-skills, which has 248 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on September 8, 2026.
Source: liucongg/liucong-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.