{"id":50752041,"url":"https://github.com/kuras3/product-ui-design","last_synced_at":"2026-06-11T02:03:40.579Z","repository":{"id":363699832,"uuid":"1264396997","full_name":"kuras3/product-ui-design","owner":"kuras3","description":"A Claude skill for restrained, production-grade product UI (dashboards, SaaS, settings, tables, forms) that looks shipped, not AI slop — the counterpart to frontend-design.","archived":false,"fork":false,"pushed_at":"2026-06-10T01:05:51.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-10T03:05:57.365Z","etag":null,"topics":["anthropic","anti-ai-slop","claude-code","claude-skill","dashboard","design","design-system","frontend","product-design","saas","ui","ui-design"],"latest_commit_sha":null,"homepage":null,"language":"Markdown","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kuras3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-09T21:06:49.000Z","updated_at":"2026-06-10T01:05:44.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/kuras3/product-ui-design","commit_stats":null,"previous_names":["kuras3/product-ui-design"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/kuras3/product-ui-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuras3%2Fproduct-ui-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuras3%2Fproduct-ui-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuras3%2Fproduct-ui-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuras3%2Fproduct-ui-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kuras3","download_url":"https://codeload.github.com/kuras3/product-ui-design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuras3%2Fproduct-ui-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34178824,"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-06-11T02:00:06.485Z","response_time":57,"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":["anthropic","anti-ai-slop","claude-code","claude-skill","dashboard","design","design-system","frontend","product-design","saas","ui","ui-design"],"created_at":"2026-06-11T02:03:35.542Z","updated_at":"2026-06-11T02:03:40.570Z","avatar_url":"https://github.com/kuras3.png","language":"Markdown","funding_links":[],"categories":[],"sub_categories":[],"readme":"# product-ui-design\n\nA Claude Code / Claude Agent **Skill** for building functional product UI — dashboards, SaaS tools, settings, app screens, admin panels, data tables, forms — that looks like a **real shipped product** (Apple / Linear / shadcn register), not generic AI slop.\n\nIt is the **counterpart to maximalist marketing design skills** (like the official `frontend-design`). Where those optimize for an unforgettable, distinctive artifact, this skill optimizes for the opposite register: **restraint, correctness, and the absence of the signals that mark a UI as AI-generated.**\n\n## Why this exists\n\nLeft to default, models converge on a recognizable \"slop\" look for product UI: purple-blue gradients, glowing status dots, monospace eyebrow labels, evenly-timid palettes, four identical stat cells, a filled+ghost button pair in every hero. Marketing-oriented design skills don't fix this — several even *recommend* grain, glow, gradient mesh, and custom cursors, which are exactly the tells that read as AI-made in a product surface.\n\nThis skill fixes it with three disciplines:\n\n1. **Observe before you invent** — anchor values to measured real products, not \"modern and clean.\"\n2. **Floor / ceiling** — know when to restrain (the functional floor) vs when to commit to character (the expressive ceiling), and never let ceiling techniques leak into the floor.\n3. **Output-time hard-checks** — scan your own output against a curated list of common AI tells and replace each with a correct primitive. An optional `scan-tells.py` gate greps for the machine-detectable ones.\n\n## When to use it\n\n- **Use** for: dashboards, SaaS app screens, settings, admin panels, data tables, forms, internal tools, B2B product UI.\n- **Don't use** for: expressive marketing pages, brand/landing heroes, campaign sites — use a marketing/expressive-design skill for that register instead (e.g. `frontend-design`).\n\nMost real products have both surfaces; this skill governs the product surface.\n\n## Contents\n\n```\nproduct-ui-design/\n├── SKILL.md                  # the doctrine (loaded when the skill triggers)\n├── references/\n│   ├── ai-tells.md           # the output-time hard-check list\n│   ├── primitives.md         # concrete default values (tokens, type, shadows, buttons,\n│   │                         #   tables, settings, destructive actions, reference DNA profiles)\n│   └── example.md            # one fully worked build (anchor → diverge → annotated code)\n└── scripts/\n    └── scan-tells.py         # optional mechanical gate (no dependencies)\n```\n\n## Install\n\nCopy the directory into your skills directory, **keeping the folder name `product-ui-design/`** (it must match the `name` in the frontmatter for the skill to load):\n\n- Claude Code: `~/.claude/skills/product-ui-design/`\n- or a plugin / project `.claude/skills/product-ui-design/`\n\nThe skill activates automatically when you ask Claude to build product/app/dashboard UI. To verify it loaded, ask Claude to build a small dashboard and confirm it applies restraint (semantic tokens, status pills not glowing dots, tabular numbers).\n\nOptional mechanical gate:\n\n```\npython scripts/scan-tells.py \u003cyour-file-or-dir\u003e\n```\n\n## License\n\nMIT — see `LICENSE`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuras3%2Fproduct-ui-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkuras3%2Fproduct-ui-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuras3%2Fproduct-ui-design/lists"}