type-led-launch-design build log

type-led-launch-design is a DESIGN.md skill release for one narrow frontend job: type-led technical product launch pages where typography carries the product signal instead of generic generated UI decoration.

The release ships a Codex/Claude-compatible skill, a canonical references/DESIGN.md, a self-contained static landing-page example, and generated launch assets. The example page is deployed at https://type-led-launch-design.vercel.app so the design standard is inspectable as a real page, not just a checklist.

Why this release

Coding agents can assemble complete frontends, but launch pages still tend to collapse into the same pattern: vague hero claim, fake dashboard, decorative gradient, bento sprawl, and weak product signal. The useful artifact is a small design standard with exact implementation constraints and a page that proves the standard can be built.

This release rides the growing DESIGN.md pattern for agent-readable visual identity files and the practical need for stronger frontend taste in coding-agent workflows.

What shipped

• Repo: https://github.com/dvnc-labs/type-led-launch-design
• Release: https://github.com/dvnc-labs/type-led-launch-design/releases/tag/v0.1.0
• Demo: https://type-led-launch-design.vercel.app
• Artifact type: Codex/Claude skill plus DESIGN.md standard.
• Scaffold: omidsaffari/skill-starter.
• Canonical design standard: references/DESIGN.md.
• Runnable example: assets/example-landing.html.
• Generated assets: assets/specimen.png, assets/og.png, and assets/demo.gif.
• Reproducible renderer: scripts/render-assets.sh and scripts/render-assets.swift.

Design thesis

Type is the product signal. A launch page should lead with product name, hard proof, and a real visual state, then use whitespace, contrast, and section rhythm to create the feeling. Decoration is allowed only when it clarifies the product.

The included Fieldline example uses a generated bitmap specimen in the first viewport, large type, proof blocks, and restrained sections. It avoids fake dashboards, decorative blobs, viewport-width type scaling, and card-heavy hero composition.

Gates

• Remote repo created from the private omidsaffari/skill-starter template.
• Local frontmatter and placeholder gates passed.
• No lorem ipsum or banned AI-power framing remains.
• Required files present: README.md, LICENSE, SKILL.md, references/DESIGN.md, assets/demo.gif, assets/og.png, and assets/example-landing.html.
• assets/og.png is 1280 x 640 and under 1 MB.
• assets/specimen.png is 1080 x 720.
• Static HTML checks passed for semantic page structure, CTAs, mobile media query, and reduced-motion rule.
• CSS checks passed: no viewport-width font sizing and no negative letter spacing.
• Asset renderer reruns successfully.
• GitHub Actions CI on e3d9c5d: passed.
• Vercel demo health check: HTTP 200.

Distribution kit

Show HN title:

Show HN: DESIGN.md rules for type-led launch pages (skill + static example)

Awesome-list target:

https://github.com/hesreallyhim/awesome-claude-code

Topics:

design-md, frontend-design, landing-page, claude-code, codex, agent-skills, design-standard, technical-writing, web-design, product-launch, static-html, design-systems.