White linework on deep cyanotype blue. Drafting grids, dimension lines, leader callouts and a title block turn your page into a real technical drawing sheet.
Blueprint turns your page into a real technical drawing sheet. White linework on deep cyanotype blue, drafting grids, dimension lines, leader callouts and a title block where your footer used to be. It looks like a working document an engineer would sign.
Blueprint web design makes a page read like a real technical drawing sheet. It uses white linework on deep cyanotype blue (or a whiteprint variant), drafting grids, framed sheets with zone references, title blocks, dimension lines, leader callouts, section markers and exploded views. The references are architectural drawing sets, engineering schematics, patent drawings and vintage cyanotype prints. It works best when there is a real subject to draw, such as a device, a product or a system, which makes it ideal for hardware and robotics launches, developer and infrastructure tools, and architecture or engineering studios. Soft, playful or lifestyle brands should choose a different style.
A framed border with zone references, sheet numbers on every section and a title block at the bottom. The drafting conventions carry the style, so a blue grid alone never does the job.
Dashed lines mark inactive or upcoming items, center lines mark axes, and redlines mark errors and changes. Use them the same way everywhere and the page reads as engineered.
One honest SVG drawing of your product anchors each screen, with real dimensions and labels. That single drawing does more for the look than any decoration.
Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction. Then hand those references to Claude Code. It makes a big difference in the final output.
The prompt, the cursor, the monospace grid. Terminal design takes the CLI's honest visual vocabulary and turns it into a complete design system.
A light-background sci-fi HUD aesthetic built on clinical precision — thin line work, targeting reticles, dot-matrix numerals, and a single warning-light accent color.
Vibe coding UI design guide: why AI-built apps look generic, how to pick a design style, and how to give Claude, Cursor or Lovable real design direction.
AI coding tools fall back on the same safe, forgettable aesthetic when they don't have design direction. Here's how to fix it with SKILL.md and DESIGN.md.
Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.