>_ DevTrendsnl

Taal

Home

Talen

Secties

Frontend Backend Mobiel DevOps AI / ML
HTML

Design Without a Designer: Building Interfaces Right in the Terminal

19.772 sterren

A familiar story: you write code, the logic works perfectly, but everything looks like a blast from the nineties. To make it look good, you either have to open Figma and remember how to draw rectangles, or call a designer and wait a week. But what if you just need to quickly sketch out a prototype or put together a presentation for a meetup?

Recently I stumbled upon the huashu-Design repository. It's not another graphics editor or UI component library in the traditional sense. It's a "skill" for AI agents (like Claude Code or Cursor) that transforms text prompts into ready-to-use, working design artifacts. You literally type in the terminal: "Make me a prototype of an iOS habit tracker app," and a couple of minutes later you get an interactive HTML file.

What Is This Anyway

The project author, developer known as 花叔 (Huasheng), decided to bring the Claude Design philosophy to the command line. The core idea is that good design doesn't emerge in a vacuum. It grows out of context: existing brand guidelines, logos, and color palettes.

Huashu Design is a set of instructions and tools that teach a neural network to work like a professional junior designer. The tool can extract colors from your site, select fonts, and generate not just images, but working code.

What This Tool Can Do

The project addresses several developer pain points when it comes to visuals. Here's what it outputs:

  1. Interactive prototypes. It generates HTML files with an iPhone 15 Pro frame mockup. Buttons are clickable, screens switch, data pulls from real APIs or mocks.
  2. PPTX presentations. You ask it to sketch slides for a talk, and the tool creates an HTML deck that can be converted to standard PowerPoint. And these won't be images—they'll be editable text blocks.
  3. Motion design. It has a built-in Stage + Sprite engine. You can ask it to create an animation of your algorithm's workflow and get an MP4 or GIF output.
  4. Infographics. If you need to visualize data for an article or report, the tool typesets a magazine grid using CSS Grid.

An interesting detail: the project includes 40 ready-made styles (20 for web and 20 for presentations). This helps avoid the typical "AI-generated" style with purple gradients and cookie-cutter icons that everyone's already tired of.

How It Works Under the Hood

The most valuable thing here is the brand working protocols. When you ask it to create a design for a specific company, the agent doesn't guess at colors. It follows a strict algorithm:

  • Searches for the official page brand.company.com.
  • Downloads logos in SVG format.
  • Parses the site's CSS files to extract exact HEX color codes.
  • Saves everything to file brand-spec.md.

Only after that does the actual rendering begin. This approach ensures the result won't look like a random hack job.

For animations, a timeline model is used. You describe the logic via APIs like useTime or interpolate, and built-in scripts based on Playwright render it into a video stream.

How to Try It

The tool is optimized for Claude Code, but it can be adapted for other AI tools. Installation is straightforward:

npx skills add alchaincyf/huashu-design

After that, you can give direct commands in the agent's chat. For example: "Make a presentation about AI psychology in 3 style variants." The agent won't just dump text—it will suggest three visual directions based on its style library.

Who Will Find This Useful

I see two main scenarios. The first is rapid hypothesis testing. When you need to show a client or team how a feature will work without spending hours on mockups. The second is content creation. If you run a blog or speak at conferences, the ability to put together a stylish presentation or animation right while writing code is a huge time saver.

The project recently switched to MIT license, so it can be freely used for commercial purposes.

Of course, huashu-Design won't replace an art director. Complex interfaces with deep UX refinement still require human hands. But for tasks along the lines of "make it look good and fast," this is arguably one of the most interesting solutions I've come across lately.

If you're tired of wrestling with CSS or just want your side projects to look respectable—take a look at the repository. The README has plenty of live examples that explain the capabilities better than any text.