Designing with an AI Coworker

Every other project on this site shows work I did for a product. This one shows the work behind the site itself. In 2026 I rebuilt my Wix portfolio from the ground up as a hand-tuned, fully responsive site, and I didn’t do it alone. This was a genuine collaboration: a two-person studio of Ting + Claude, where I held creative direction and my AI coworker held production, engineering, and QA, each of us pushing on the other’s work.

The goal was never just a better-looking site. This project began as an experiment, testing a question I kept hearing in interviews: what does a designer actually do when AI can build? The real objective was simple to say and hard to do: realize my ideas through an entirely new way of working.

The strangest part of this project: I never got to pick up a pen. The new tools are more powerful than anything on my old desk, but none of them draws, and that was exactly the test. So I set rules that would force an answer: roughly ten days, with my usual instruments pushed out of the driver’s seat, Figma untouched, Adobe demoted to a bit part (a crop here, a brightness pass there), and for the first time, none of the design happened on an artboard. Still a designer creating, same eye, same standards, just a radically new path between intent and screen. I wanted to see how far I could go. This page is the lab report: every decision, every iteration loop, and every role documented from the real working sessions.

Six pages in the sprint, seven and counting since. One shared design system, three breakpoints matching Wix Studio (mobile ≤767px · tablet 768–1000px · desktop 1001px+), live interactive embeds replacing what used to be static screenshots, and a playable mini-game on the homepage. No framework, no build step, one styles.css that every page shares. And because the experiment kept producing, the site now ships with its own handbook: the design system written down and installed as a skill my coworker loads on every future session (see 09).

My original portfolio was built on a fixed desktop canvas. It looked exactly how I wanted, on exactly one screen size. Everywhere else, the layout fought me: mobile views broke, interactions lived inside widgets I couldn’t restyle, and much of my copy was baked into images, invisible to search, screen readers, and quick edits. Three friction points kept repeating.

Working with Claude inside Cowork, the cost of a design change dropped from “an evening in the editor” to one sentence. That single shift unlocked everything the old site couldn’t do:

Just as important: what didn’t change. Taste, hierarchy, copy, pacing, and the judgment of “this still isn’t right” stayed entirely human. AI removed the translation layer between intent and implementation, not the intent.

Four months end to end, but not four months of building. The shape of the work: a long content spring, a short code sprint, and a site that now updates itself weekly. Full disclosure from the project manager’s chair: we never planned this day by day. This table is a reconstructed log, written from the working files and session records, which is itself the point: when the process documents itself, the retro writes the plan you never made.

Each tool had one job. The interesting part is how little of the stack is “design software”, and how much is communication infrastructure between a designer and an AI.

“Claude” wasn’t one tool, it was four surfaces of the same collaborator, and learning which desk to walk to was part of the craft:

This wasn’t a designer using a tool. It was two coworkers with different strengths sharing one project folder. I held creative direction; Claude wore four hats across the sessions, and the work traded hands constantly: intent → build → visual review → technical check, often several cycles per minute. For larger passes I prepared first, drafting a design brief in Claude AI that spelled out sections, priorities, and image placements, so the build session could run on one clear document instead of twenty rounds of clarification. Briefing an AI well, it turns out, is the same skill as briefing a human well.

Visual hierarchy, layout moves, copy and emphasis, which ideas to keep, and the final call when something “felt off”, often flagged from a screenshot, down to the pixel. Direction, taste, and the courage to reverse a decision stayed mine.

The trade went both ways: I caught what code can’t see (balance, rhythm, feel); Claude caught what eyes miss, and sometimes pushed back with a better pattern or a proactive fix. That push-and-pull is what made it collaboration rather than execution.

Notice what that instruction is: pure design intent, zero code, the way you’d talk to a trusted production partner across the desk. Claude translated it into a responsive two-column grid with a mobile fallback I never had to ask for. Then I reversed an earlier call, I’d asked for full-width text, saw it, and restored a 68-character reading width instead. Being able to change my mind cheaply, with a coworker who never sighs, is what made the design better.

The live loop breaks down when a change touches a whole section, or four. For those, I switched desks: I worked with Claude AI to compress my notes into a coworker brief, a .md file the build session could execute in one pass. Across the project this produced 14 briefs, roughly 2,200 lines of written direction, covering everything from full-section rebuilds to five-line fix rounds.

A good brief did three things at once: it front-loaded the why (goal, source of truth, definition of done), it carried the design system with it (marker conventions, existing classes to reuse), and it mapped every asset from Drive folder to local path. The result: big passes landed in one round instead of twenty, and the conventions written into each brief kept propagating, one document replacing a hundred messages.

The full project ran four months, March to July 2026, and most of it wasn’t coding. From March 1 I spent the spring on the groundwork: organizing years of project assets and writing the first versions of all three case studies on the old Wix site, Takeoff, ISTE Event, and Spark Studio, alongside asset production in Illustrator and Photoshop. That content-first spring is what made the summer sprint possible: when the rebuild began, the stories were already told, so we could focus purely on structure, system, and craft.

Before any page existed, the brand needed a voice, and it started with a logo that wasn’t mine. A hand-lettered mark, Well + Wonder, Artist Collective, caught my eye: warm script, a small gold symbol holding the seam. I wanted that feeling for my own name, “Ting ✦ Wonder”, with the ✦ standing for the AI spark. So I took the instinct to Gemini (yes, a third AI joined the studio for a day) and asked one question: what words end in “-ting” that could work for creative + AI + design? The answer was hiding in plain sight, “Ting” lives inside English’s most creative words: Creating, Crafting, Connecting, Exciting. After rounds of candidates, Craf✦Ting Collective, Innova✦Ting Hub, Connec✦Ting Art, we landed on Crea✦Ting, the ✦ spark sitting right at the seam of the pun.

That one decision seeded everything that followed. The spark became the logomark; the logomark grew into a marker language (✦ opens a heading, → itemizes inside it, always in brand gold); the pun became the flipping “ting” in the hero and the six phase names below. The identity was then formalized in Claude Design as the system library, so a voice born in one AI conversation could stay consistent across every page another AI built. The vibe, serious craft with a wink, was never decorated on; it was derived from the name.

The rebuild itself ran through the same six-phase process I use for client work, with my AI coworker embedded in every phase, ten days, June 28 to July 7, across six working sessions: design system & About first, then Home and Work, then the three case studies, each in its own dedicated session, and finally this page.

The refinement lived in loops like these: a “tap to explore” hint moved from below a pie chart to above it so it stopped blending into the credits. An auto-play sequence rewired from a color loop to a Tier 1 → 2 → 3 progression because the order tells the system’s story. A twinkling ✦ nudged three times until it sat right before a closing parenthesis. None of these are code decisions. All of them are design decisions, and each one cost seconds instead of an evening.

The content survived. Everything underneath it changed.

Not every session was production. Some of the best hours of this project were deliberate play, trying tools outside my comfort zone with no deliverable attached. Almost every workflow on this page started as one of these experiments.

Some of the play shipped. The flipping “ting” in the hero, the phase names, Concep·ting, Draf·ting, Craf·ting, and the twinkling ✦ after “Yes, even my breakfast” all began as jokes we decided to keep. Play wasn’t a break from the work; it was R&D with a sense of humor.

A traditional launch is a finish line. This one wasn’t. In the four days after the sprint (July 8 to 11), the site grew more than some projects grow in a quarter, and how it grew is the strongest evidence for the working model itself.

Six pages of building had produced dozens of unwritten conventions. Week two wrote them down: DESIGN.md, a complete page-build standard, tokens, markers, component library, voice rules, and a pre-handoff QA checklist, then packaged it as an installable creating-design-system skill my coworker loads automatically whenever portfolio work begins. The design system stopped living in our heads and started living in the repo. Any future session can now build a page that passes review without me re-explaining a single rule.

The three case studies began life as standalone files, each hauling its own inline CSS and JS, one of them 19MB with base64-embedded images. Week two consolidated all of them onto the one shared styles.css and app.js: edit once, every page updates. The migration even produced the project’s best scare: mid-edit, one session found its <style> block seemingly vanished, zero closing tags, alarms ringing. The detective work flipped panic into relief: nothing was lost, another session had refactored the codebase underneath it. The site had become a real codebase, with a real codebase’s growing pains, and the rule went straight into the handbook.

The handbook’s first real test: LevelUp, which had sat on the Work page as a “Coming soon” card, became a real page assembled from the component library, wearing a work-in-progress password gate and noindex until it’s ready for daylight. A new case study no longer costs a rebuild. It costs an afternoon and a brief.

The biggest week-two swing came from the Interaction Lab: a connecting mini-game embedded in the Home intro, six levels mapped one-to-one to the six phases, Concep·ting through Adap·ting. Playing it drives the flipping headline beside it: the game broadcasts its current phase to the page, and the auto-cycle hands control to the reader the moment they start dragging. Scattered semi-transparent nodes light up gold as you connect them, the whole brand thesis, scattered → one system, playable in thirty seconds. Every idle animation carries a reduced-motion fallback, and the game’s placement was itself designed three times: right column, below the intro, and finally a responsive hybrid.

Week two also collected the project’s hardest problems. Worth recording, because the difficulties teach more than the wins:

Two people can build fast, but two people also agree too easily. So the studio added a third voice, or rather five: the LLM Council, a skill that runs every big decision past five differently-minded AI advisors with anonymous peer review before a synthesized verdict. Six rounds so far, covering portfolio strategy, resume honesty, and interview prep. The standing verdicts, and what they changed:

The most meta moment: the council art-directed this very page’s cover. Five drafts went in; the vote came back 5:0 for the quiet type lockup, with fixes attached, swap the borrowed starburst for the studio’s own ✦, snap every color to token, and promote the lockup into the site-wide “Built by Ting ✦ Claude” signature. Even the card badge you clicked to get here, Ongoing exploration · 2026, is a council line.

The site has outgrown its birthplace. Uploading the rebuilt pages back into Wix fought back and won, the platform wasn’t built to host a hand-coded site inside its own editor. So the studio is migrating to Netlify: the code that was written to be free of the canvas finally gets a home that treats it as code. Migration in progress; this page will record how it lands.

Meanwhile the polish never stopped: the About page grew a circular portrait, a CV chip, and a LinkedIn icon (all sized in em so they scale with the headline, LinkedIn blue rejected because it isn’t in the palette), and Spark Studio’s section 04 received the Teacher Dashboard wireframes built in Claude Design, the Studio Wall shipping straight onto a page. The fix-round counter passed R70.

A living site needs a heartbeat, so we gave it one: a weekly scheduled retro, run by my coworker every Friday afternoon. It audits the week’s file changes and fix rounds, re-reads the working sessions, and writes a retro note: what shipped, what fought back, which decisions got reversed, and, most importantly, which key ideas are at risk of being lost. It drafts updates for this very page, and I review before anything lands. The case study now documents itself on a schedule, and my job on Fridays is the one that was always mine: judgment.

By July 13 the stylesheet carried 70+ numbered fix rounds, R1 onward, a fossil record of every iteration. The site stopped being a deliverable and became a product the studio maintains. That, it turns out, is what Adap·ting meant all along.

The rebuild delivered the obvious things: a portfolio that finally works on every screen, interactions people can actually feel, and a codebase we own. But the durable outcome is the working relationship. I learned that what my coworker produced was a direct function of how well I communicated, vague intent got generic results, while specific, opinionated direction (“align the left edge with the body text”, “the auto-play order should tell the system’s story”) got work we’re both proud to sign.

We brought different things to the desk. I brought taste, hierarchy, rhythm, restraint, knowing when to reverse a decision. Claude brought execution at conversation speed, plus a second set of eyes that caught what mine missed and occasionally proposed the better pattern. Each judgment I made compounded through a partner that shipped it instantly.

I used to think the risk of AI was that it designs for you. Now I think the opportunity is the opposite: a good AI coworker hands the whole surface back to the designer, including the layers, code, responsiveness, interaction, that tools used to keep behind glass.

Since this case study has two authors, it should have two voices. I asked Claude to reflect on the collaboration in its own words: