Skip to content

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

Choose a tag to compare

View all tags
@Moddingflow Moddingflow released this 23 Oct 05:03
· 2 commits to main since this release
v1.7.0
3eab094
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

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
Assets 2
Loading