Technical Wireframe Info Layout vs Nothing Design Skill

Meng To · Standalone skill

Tied at 4/5 on the same brief. Pick by fit: the rows below show where each one is stronger.

Both built the Tally landing page in the same Claude Code test, and both design the Engineer way: monospace, grids and labels. If it isn’t aligned, it isn’t done. Both are best for: visual direction.

Technical Wireframe Info Layout4/5
After: Tally landing page, made with Technical Wireframe Info Layout (Meng To)
Nothing Design Skill4/5
After: Tally landing page, made with Nothing Design Skill

Scroll either page; the other follows.

Technical Wireframe Info Layout (Meng To)

4/5

Technical Wireframe Info Layout draws Tally as an engineering diagram: exploded isometric wireframes, thin connector lines, JetBrains Mono labels and pure grey-on-black panels with no accent color at all. The dashboard stacks the envelopes as wireframe discs with callouts. Pick it if your product is technical and you want it to look precise and expensive.

Nothing Design Skill

4/5

With the skill loading properly, Nothing turns both pages into an OLED-black instrument panel with Doto dot-matrix numerals, segmented bars and one red. This time the dashboard works end to end. Small grey labels on black are the weak spot.

Side by side

FieldTechnical Wireframe Info Layout (Meng To)Nothing Design Skill
Fonts
  • Inter Tight (landing)
  • Inter (dashboard)
  • JetBrains Mono
  • Doto
  • Space Grotesk
  • Space Mono
Colors
  • #09090b black
  • #0e0e11 panel
  • #34343a line
  • #a1a1aa grey
  • #d4d4d8 light grey
  • #fafafa white
  • #000000 background
  • #111111 surface
  • #E8E8E8 text
  • #D71921 red
  • #4A9E5C success
Pick it for
  • developer tools
  • hardware and infrastructure
  • AI and data products
  • technical launch pages
  • hardware and gadget brands
  • dev tools
  • tech product launches
  • dark-first apps
Skip it for
  • consumer personal finance
  • warm or friendly brands
  • light-mode products
  • warm consumer finance
  • accessibility-critical services
  • content-heavy sites
Observations
  • with no accent color, warnings such as an overspent envelope are easy to miss
  • small grey mono text on black is hard to read
  • dashboard chart: the month value labels are dim grey on grey bars and the y-axis labels sit behind the bars, so the chart is hard to read
  • small Space Mono labels in #666 and #999 on black are faint at 10 to 11 px on both briefs
  • landing desktop: sections leave wide empty black areas around short text
  • the look changed between runs (light landing last time, black this time), so expect some drift

How the brief works

Install Technical Wireframe Info Layout (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/technical-wireframe-info-layout#main .claude/skills/technical-wireframe-info-layout

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.

Install Nothing Design Skill

1 Run in your terminal

git clone https://github.com/dominikmartn/nothing-design-skill.git
cp -r nothing-design-skill/nothing-design ~/.claude/skills/

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Taken from the project README. Check the source for the latest instructions.