{"slug": "show-hn-flawless-ui-ux-a-design-skill-and-inspection-cli-for-coding-agents", "title": "Show HN: Flawless UI/UX – A design skill and inspection CLI for coding agents", "summary": "A new tool called flawless-ui-ux ships a design skill plus a local inspection CLI that lets coding agents create, redesign and refine web interfaces, with support for Codex and OpenCode. The CLI requires Node 22.12+ and installs via npx, pnpm dlx or bunx, placing the skill at .agents/skills/flawless-ui-ux for Codex and .opencode/skills/flawless-ui-ux for OpenCode, and it never overwrites existing installations. Rendered checks use Playwright 1.64.1 Chromium, matching the CLI's browser adapter, and commands such as `context` and `inspect` return JSON observations while design decisions stay with the user and agent.", "body_md": "Design interfaces around the product. Refine them against the result.\n\nflawless-ui-ux helps coding agents create, redesign, and refine web interfaces with a visual identity suited to the product. A skill guides design and implementation; a local CLI collects evidence and checks what changed after corrections. Works with **Codex** and **OpenCode**.\n\nFrom your project directory, choose your package manager to install the skill for **Codex and OpenCode in that project**. The CLI requires **Node 22.12+**; no checkout or Bash is needed.\n\n```\nnpx flawless-ui-ux@latest install\npnpm dlx flawless-ui-ux@latest install\nbunx flawless-ui-ux@latest install\n```\n\nRun one of these commands. The examples below use `npx`; replace it with `pnpm dlx` or `bunx` to use the same operations.\n\nFor a specific agent, or an installation across projects:\n\n```\nnpx flawless-ui-ux install --codex\nnpx flawless-ui-ux install --opencode --global\n```\n\nThe default is both agents in the current project. Use `--codex`, `--opencode`, or `--all-agents` to select targets. `--global` explicitly installs in your user profile; `--project <directory>` selects another project. Start a new agent session if needed for discovery.\n\nExisting installations are never overwritten, including links and local changes. All selected destinations are checked before copying. Review or remove an existing installation yourself before reinstalling. Global paths honor `CODEX_HOME` and `XDG_CONFIG_HOME`; project paths are `.agents/skills/flawless-ui-ux` for Codex and `.opencode/skills/flawless-ui-ux` for OpenCode.\n\n## Alternative: install from a checkout with Bash\n\n```\nbash ./install.sh --codex --project\nbash ./install.sh --opencode --project\n```\n\nRun these from the target project's directory, using the script's absolute path when the checkout is elsewhere. Use `--all-agents` for both. The legacy Bash script requires `--project` for local installation and otherwise installs globally. On Windows, this alternative requires Git Bash or WSL.\n\nIn Codex, select `$flawless-ui-ux` and describe what you want to build:\n\n```\nUse $flawless-ui-ux to build a financial dashboard for freelancers.\n```\n\nIn OpenCode, request the installed skill by name. Continue in the same conversation to develop the result:\n\n| Goal | Example request | \n|---|---|\n| Create | Build a landing page for a DevOps app that coordinates deployments and incident handoffs. | \n| Redesign | Redesign the mobile account screen using the supplied brand palette. Preserve its content and behavior. | \n| Refine | Strengthen the main action and improve hierarchy while preserving the page's visual character. | \n| Focus | Improve typography and spacing. Preserve wording, colors, and functionality. | \n| Review | Review this dashboard for readability, navigation, repeated slogans, and redundant icon cues. Report findings without editing files. | \n\nThe skill connects product intent to composition, typography, color, density, imagery, and interaction. It works with your project's stack and existing constraints, using focused references when they answer a design question. Refinement can add presence, redistribute emphasis, or improve finish; it does not prescribe a universal aesthetic.\n\nUse the CLI directly or have your agent run it as part of the task. Design and corrections stay with you and your agent; the CLI supplies observations and comparisons.\n\nStart with project context or selected source files:\n\n```\nnpx flawless-ui-ux context --project . --format json\nnpx flawless-ui-ux inspect --project . --source src/App.tsx --format json\n```\n\nFor rendered checks, start your application and prepare a browser using one of these commands:\n\n```\n# npm\nnpx playwright@1.64.1 install chromium\n\n# pnpm\npnpm dlx playwright@1.64.1 install chromium\n\n# Bun\nbunx playwright@1.64.1 install chromium\n```\n\nThe version matches the CLI's browser adapter. Alternatively, select an installed compatible Chromium executable with `--browser-executable` or `FLAWLESS_BROWSER_EXECUTABLE`.\n\nInspect the actual development-server URL and save a baseline:\n\n```\nnpx flawless-ui-ux inspect --project . --source src/App.tsx --url http://localhost:5173 --output ../app-before --format json\n```\n\nRepeat `--source` for additional files, use `--selector` for a specific region, or repeat `--viewport WIDTHxHEIGHT` to select widths. Default samples are **1440×900** and **390×844**.\n\nReview the findings, make the relevant corrections, then repeat the saved scope:\n\n```\nnpx flawless-ui-ux verify ../app-before/run.json --output ../app-after --format json\n```\n\nVerification separates persistent, new, and no-longer-observed findings. A missing confirmed target or changed conditions remain unverified instead of being counted as a repair. Keep the same browser selection between runs.\n\nWithout `--output`, results go to stdout. With it, a new directory receives `run.json` and any screenshots; the parent must already exist. Existing output directories are never overwritten. For review-only work, keep artifacts outside the project.\n\n| Area | Evidence | \n|---|---|\n| Accessibility | Selected axe contrast and accessible-name rules, with upstream evidence and incomplete results retained. | \n| Readability and layout | Computed text sizes and horizontal overflow at the requested widths. | \n| Assets and runtime | Visible broken images and uncaught JavaScript errors in the sampled state. | \n| Copy and icons | Exact repeated phrases and arrow cues for contextual review. | \n| Source | Literal pixel font sizes and arrow/icon cues in selected files. | \n\nSmall text, overflow, and repetition require judgment. A small font size alone is not a WCAG failure, and an arrow count does not determine whether an interface is good. The skill's contextual review considers what each element contributes to the product.\n\nInspection does not edit sources, start servers, download browsers, or submit forms. These initial-state samples do not establish full WCAG conformance, keyboard journeys, business-flow correctness, or visual quality.\n\n| Exit code | Meaning | \n|---|---|\n| `0` | Requested coverage completed without confirmed errors. | \n| `1` | Requested coverage completed with confirmed errors. | \n| `2` | Invalid input or incomplete requested coverage. | \n\nUse the pinned Bun toolchain from a local checkout:\n\n```\nbun install --frozen-lockfile\nbun test\n```\n\nSee the [testing guide](https://github.com/smokeeaasd/flawless-ui-ux/blob/main/docs/testing.md) for browser fixtures, distribution checks, and Windows/Ubuntu CI. Automated tests validate runtime and packaging behavior; matched host/model evaluations of design quality and elapsed time remain pending in the [manual evaluation kit](https://github.com/smokeeaasd/flawless-ui-ux/blob/main/evals/README.md).\n\n[MIT](https://github.com/smokeeaasd/flawless-ui-ux/blob/main/LICENSE).", "url": "https://wpnews.pro/news/show-hn-flawless-ui-ux-a-design-skill-and-inspection-cli-for-coding-agents", "canonical_source": "https://github.com/smokeeaasd/flawless-ui-ux", "published_at": "2026-11-05 17:30:09+00:00", "updated_at": "2026-11-05 17:51:56.940755+00:00", "lang": "en", "topics": ["ai-agents", "developer-tools", "ai-tools"], "entities": ["flawless-ui-ux", "Codex", "OpenCode", "Playwright", "Node"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/show-hn-flawless-ui-ux-a-design-skill-and-inspection-cli-for-coding-agents", "markdown": "https://wpnews.pro/news/show-hn-flawless-ui-ux-a-design-skill-and-inspection-cli-for-coding-agents.md", "text": "https://wpnews.pro/news/show-hn-flawless-ui-ux-a-design-skill-and-inspection-cli-for-coding-agents.txt", "jsonld": "https://wpnews.pro/news/show-hn-flawless-ui-ux-a-design-skill-and-inspection-cli-for-coding-agents.jsonld"}}