Better Design v1.7.1 — motion probe starts reliably in CI

Better Design 1.7.1

A patch release: the motion probe now runs on Linux CI runners.

What changed

• Motion probe starts Chrome reliably in CI. motion_probe.mjs reads the DevTools endpoint from DevToolsActivePort in its temporary profile instead of relying only on Chrome's stderr banner. It no longer fails with a bare Chrome did not start on Linux runners such as GitHub Actions ubuntu-latest.
• Clear failures. When Chrome exits before DevTools is ready, the probe stops at once and prints Chrome's exit code, binary path, and the tail of its stderr.
• Linux containers. The probe adds --disable-dev-shm-usage on Linux, and the startup timeout is 45 s.

Full details: CHANGELOG.md.

Upgrade

npx skills update better-design

Use a fixed release

For a stable copy you can inspect before installing:

git clone --branch v1.7.1 --depth 1 https://github.com/Moddingflow/better-design.git
npx skills add ./better-design --skill better-design --agent codex

Better Design v1.7.0 — reliable default style and a live demo

Better Design 1.7.0

The default style now lands when nobody gave a visual brief, and a live demo shows the difference the skill makes before you install it.

▶ Live demo: the same prompt, a night-train booking site, built by an agent without the skill and with it. Switch between them in place and click through both, then open the bundled live pages.

What changed

• The default style applies reliably. Agents often skipped it for two reasons, and house-style.md now rules both out:
  • The product's domain, industry, audience, or name ("a coffee roastery", "for developers") is not a visual cue.
  • Untouched scaffold defaults (shadcn/ui, Tailwind, create-next-app, Vite, Expo, Bootstrap, MUI, Chakra, Mantine) are not a design system to inherit. A token mapping puts the house style onto shadcn/ui and Tailwind instead.
• Start from the reference. When the style applies, the agent begins from assets/house-style.html (tokens, type classes, nav, buttons, tiles, section rhythm) instead of rebuilding the look from memory.
• Page anatomy and imagery.
  • A defined set of section blocks.
  • A hero that leads with the product, not a dashboard or a form.
  • An imagery path for products without photos: own UI in a frame, a drawn monochrome object, or a sized and labeled media slot.
• Catalogs and shops. The one filled pill per viewport is the page-level action. Per-item actions are ghost pills or links, and item cards lead with media.
• Verification. A side-by-side screenshot comparison with the reference at 1440 and 390 px. Code-level conformance checks for headline weight, font family, palette, elevation shadows, gradients, tile borders, pill shape, and filled pills per viewport.
• Effects gallery. Rebuilt around the reference page's placeholder product, with new README images.
• Live demo on GitHub Pages. It lives in demo/ and is deployed by .github/workflows/pages.yml.

Full details: CHANGELOG.md.

Upgrade

npx skills update better-design

Use a fixed release

For a stable copy you can inspect before installing:

git clone --branch v1.7.0 --depth 1 https://github.com/Moddingflow/better-design.git
npx skills add ./better-design --skill better-design --agent codex

Better Design v1.6.0 — interaction kit, motion probe, and default style

Better Design 1.6.0

Controls that answer the finger, a premium default style for projects without a brief, measured layout geometry, and an optional pool of signature effects. This release also publishes 1.2.0–1.5.0, which were not released separately.

What changed

• Interaction kit (assets/motion/): every created or redesigned UI adopts framework-free CSS/JS before building components. A three-layer press (size-aware compression with a fill step, a bloom from the touch point, a spring release with ~1% overshoot), a 90 ms minimum press, keyboard press, hover, a growing focus ring, switches, checkboxes, sliding segmented indicators, pending/done/error buttons, icon swaps, popovers that grow from their trigger, and animated disclosures.
• Motion probe (scripts/motion_probe.mjs): a dependency-free Node.js 22+ check that drives headless Chrome, Chromium, or Edge, presses, hovers, and focuses every control, and fails pages without press feedback or visible focus. It warns on 1–2 px presses, instant returns, and transition: all. A zero-error run is now part of acceptance.
• Default style (references/house-style.md): with no visual brief and nothing to inherit, a premium ultra-minimal style — black canvas, Geologica, two grays, one blue. Ships with a DESIGN.md preset, a reference page, and a palette whose 44 contrast pairs pass the validator. Any visual cue from the user replaces it.
• Optional effects pool (references/effects-library.md): live and baked ordered dither, a dot language (dot fields, dotted globe, dot-matrix text, LED status icons), structural marks, and scroll scenes, each with budgets, fallbacks, and reduced motion.
• Layout geometry (references/layout-geometry.md, scripts/check_layout.py): equal gaps, shared alignment lines, ink-centered content, and containment, measured from layout dumps for the web, Unity, and Godot.
• README in English and Russian with screenshots; CI now validates the default palette, runs the layout tests, and probes the bench pages in normal and reduced-motion mode.

Full details: CHANGELOG.md.

Upgrade

npx skills update better-design

Better Design v1.1.0 — English skill and stronger UI copy rules

Better Design 1.1.0

The full installable skill is now in English, with stronger rules against redundant AI-generated interface copy.

What changed

• Translated all 11 reference guides, the DESIGN.md template, and both contract examples. The Russian README remains an optional reader guide.
• Added explicit version metadata to SKILL.md.
• Added rules against page introductions that narrate an obvious purpose, descriptions that paraphrase toggle labels, and helper text added to every row by default.
• Required each explanation to add a useful new fact. Preserve verified consequences, limits, unfamiliar concepts, recovery steps, and accessible instructions.
• Descriptions are optional: remove empty wrappers and spacing when no explanation is needed. Never invent product facts to replace filler.
• Added copy acceptance checks, evaluation scenarios, an example prompt, and ten documented manual review cases.
• Added a distribution check for leftover Cyrillic in instructions, metadata, templates, and examples. Unicode regression-test literals remain intentional.

Install or update

npx skills add Moddingflow/better-design --skill better-design

For an existing CLI-managed installation:

npx skills update better-design

Select the correct project/global scope and preserve custom changes before updating.

Validation

All 47 existing validator tests and all three example validations pass locally. The validator code, token calculations, schemas, and Unicode regression tests are unchanged. Existing reference link targets and example structure/IDs/numbers were preserved. An isolated negative fixture confirmed that the new language check fails on untranslated Cyrillic and passes after it is removed.

GitHub Actions passed all four jobs: Windows and Linux with Python 3.10 and 3.13. Skills CLI 1.7.0 installed the published package in an isolated project with Codex, Claude Code, and Cursor selected; all 20 installed files matched the release contents after line-ending normalization.

The ten copy cases are a manual semantic review, not an independent cross-agent benchmark or a rendered-UI test.

Copy rules · Manual review cases · Changelog

Better Design v1.0.0 — UI/UX skill for AI coding agents

Better Design 1.0.0

An open-source UI/UX and frontend design skill for AI coding agents, covering art direction, a shared DESIGN.md, design tokens, motion, accessible interactions, and real UI verification.

Install

npx skills add Moddingflow/better-design --skill better-design

For a fixed version, clone this tag and install the local checkout:

git clone --branch v1.0.0 --depth 1 https://github.com/Moddingflow/better-design.git
npx skills add ./better-design --skill better-design --agent codex --copy

Included

• The complete skill with 11 reference guides, 4 templates/examples, agent metadata, an offline validator, and its regression tests.
• English and Russian README files, installation and troubleshooting instructions, example prompts, and validation documentation.
• MIT license and GitHub Actions checks on Windows and Linux with Python 3.10 and 3.13.

Verification

• All 47 validator regression tests passed locally on Windows with Python 3.10.
• Both contract examples and all 4 declared token contrast pairs passed their offline checks.
• Skills CLI 1.7.0 discovered and installed the published GitHub package with Codex, Claude Code, and Cursor selected in an isolated project directory.
• Package integrity and local documentation file links passed.
• GitHub Actions passed all four jobs: Windows and Linux, each with Python 3.10 and 3.13. View the run.

The detailed reference guides remain in Russian. Installation checks do not establish agent output quality. The validator does not certify rendered UI, full accessibility compliance, or production readiness.

English documentation · Русская инструкция