I am writing this font after I did a major haul to my personal website. I want to admit that I wouldn’t be able to come up with design if its not for Impeccable. This is the part two of the website development, where in the part one I asked chatbots to make me an elegant and professional personal website. ChatGPT, Claude, and Gemini makes me one HTML page, and in the end, I liked the Claude’s one.
However, that HTML website still smelled like Claude. I mean, I like the design actually, but after spending some time following web designers and consuming their contents, I became informed that Claude has several design quirks that make the output design somewhat similar. For example, you might have noticed that Claude likes to user its own color (“terracotta”) in its design, make a lot of websites seem orangey. That’s why I was relieved that the HTML it gave me doesn’t have orange/terracotta as the primary or secondary color. However, Claude also likes to use Fraunces and Inter as the website’s font, and I found them in the HTML file!
I was trying to look up the ways to remove this “Claude traces” from the website, and I found Impeccable.
Impeccable Init
I paired Impeccable with OpenCode, an open-source code agent (like Claude Code or Codex) that gives a generous quota of various open-weight LLMs. This time I use Meta’s Muse Spark 1.2. (Note to self: I should write about OpenCode in more detail in the future.)
The installation is easy. After opening OpenCode and entering the project folder, I started a new session. The command to install Impeccable is npx impeccable install and it will install itself. After that, I pasted the HTML file Claude gave me into the project folder, and run /impeccable init. It then analyzed the HTML file, asked me several questions:
Who is the primary visitor you're designing this portfolio for right now,
and what job are they doing when they arrive? I see signals for
(a) process/lab/manufacturing teams considering a small automation pilot and
(b) peers/recruiters evaluation Ria's background.
_Followers: build in public_
What should this site make possible that a generic AI consultant portfolio could
not truthfully copy? Your current lede leans on D.Eng Chemical Engineering + n8n/
AI generation + 5-year parenting gap reframed as 'building openly'--is that the
durable edge to preserve?
_Automation specialist_
This is currently static HTML/CSS (index.html only, no framework). Should future
surfaces stay static HTML/CSS, or do you want a framework? And any deploy target
that constrains it (e.g. Cloudflare Pages, Vercel, GitHub Pages)?
_Stay static HTML/CSS_And then it made me a PRODUCT.md that captured the design’s vision and mission. It specifies the platform (web), tech stacks, intended users, product purpose, positioning, operating context, capabilities and constraints, brand commitments, and product principles. Very thorough and professional, in my eyes that knows nothing about this.
Impeccable Typeset (after Critique)
After that, I decided to make Impeccable evaluate the Claude’s HTML file by running /impeccable critique this index.html. I want Impeccable’s skills to catch those Claude’s quirks, but instead, it lamented about how the links in the HTML file are dead and some minor issues (in my uneducated opinion). So I ask it directly to give alternatives to the current Fraunces and Inter font.
Me: /impeccable typeset the website uses Claude's commonly used Fraunces and Inter font. Could you suggest another typeset that is better and not commonly used by AI? Then, please compare with the current typeset, which one do you prefer?
AI: Your current Fraunces + Inter is peak AI-era — let me find a fresher typeset and stack them head-to-head.
Me: (eye roll)
AI: Current typeset of Fraunces (400,500,600) + Inter (400,500,600,700) + IBM Plex Mono. This is Claude’s house style — recognizable as AI-generated to a design-literate reader.
AI: Recommended: Instrument Serif + Instrument Sans + Fragment Mono
Me: Okay, go with the recommendation…… WAIT! I think I saw this font somewhere…….
And turns out this Instrument Serif font is the next font that you see a lot nowadays… this font also smells Claude! Disclaimer, I do think this font is beautiful, created by talented professionals (this applies to Fraunces and Inter, too), but I am trying to be different with this project..
After some deliberation, Impeccable helps me find Newsreader + Public Sans + Fragment Mono as the typeset of this personal website project.
Impeccable Colorize
/impeccable colorize I actually have a logo with #e7a2b6 color, #f9f5f2 as the "white" and
#010000 as the "black". could you colorize the HTML file based on the logo color and see whether
#f9f5f2 and #010000 are good choices and please secondary and accent color (if necessary) for me.I actually have a logo for my personal brand, but in the end I haven’t use it in the website, because I was so afraid to disturb the design. However, I do like its color and I want to implement it on my website. Impeccable accepted my primary color and added some other complimentary colors to make a color palette.
Impeccable [Conversation]
I asked Impeccable to fix the layout with the command /impeccable layout and then continued the conversation freely with Impeccable and I think the conversation went well. Impeccable made an SVG illustration that I didn’t like so I asked for a text prompt for image generation AI to make the illustration that it wanted. It gave me this:
Minimal continuous line art blueprint illustration, engineering P&ID aesthetic, on SOLID background #010000
Subject left to right in ONE horizontal pipeline:
1) bottom-left: Erlenmeyer flask with subtle liquid line + small circuit branch (3 nodes, thin lines to flask) — matching reference flask+circuit motif
2) center-left: vertical SDS document (rounded 2px corners, 4 horizontal lines inside, small solid dot accent top-right of doc)
3) center-right: three stacked pill-shaped automation nodes (n8n style, same size, rounded fully), connected from document by dashed lines (dash 6 gap 5)
4) right end: thin checkmark inside small solid circle
Style: ultra-thin uniform stroke 1.8px, rounded caps and joins, single pink line color #E7A2B6 ONLY, no gradients, no fills except solid circle and dot accents. Faint ghost blueprint behind — very light grid and thin outline of vessel/circle at 12-14% opacity in #F9F5F2, barely visible. Small solid accent dots (2×) in #F9F5F2 at 100% opacity. Generous negative space. Hand-drawn but precise, not cartoon, not 3D, not shaded.
Composition: centered, wide 1.46:1, all elements on one baseline, breathing room on edges, no text, no letters, no typography, no watermark, no people, no lab clutter.
Background: FLAT SOLID #010000 — must be exactly #010000 fill, no vignette, no gradient, no paper texture
Negative: no color variations, no thick strokes, no fill on flask/doc/nodes, no drop shadows, no photorealism, no extra icons, no chemistry glassware beyond flask, no backpack/lego/paper plane/human figureand I liked the resulting image (I made it for free in Google Flow).
Impeccable Document
After getting all design that I wanted, I asked Impeccable to document all the design system with the command /impeccable document. It then made Google Stitch’s DESIGN.md that can be carried over to other projects with identical branding.
One note that I think I should’ve done earlier is to separate style.css from the HTML files, so the AI doesn’t have to write all the CSSs every time a new HTML file was made.