How Claude Design Turned code80’s Codebase into a Production‑Ready Animation

Provide the Design Context

Claude Design opens with a canvas and a "Start with context" panel. The author uploads a full screenshot of code80’s homepage and links the frontend repository, giving the AI concrete visual and code references.

Select the Desired Design Direction

In the skill panel the author checks "Frontend design" and "Interactive prototype" (avoiding the video‑only option). The prompt includes the current state, product selling points, strict constraints, exact brand colors, and a performance requirement to use only transform and opacity.

Claude returns three sketch concepts:

A – a minimal "routing capsule" that simply tags three models inside the terminal.

B – a "forked routing" diagram with a gateway node splitting to three models.

C – an "intelligent routing" view showing three upstream candidates with metrics, selecting the best one.

The author chooses concept C because it best illustrates code80’s core value: an API gateway that automatically picks the optimal upstream model (Claude, GPT, Gemini) based on health and latency. Concepts A and B were rejected for being too static or visually inconsistent with a terminal UI.

Claude initially inserted placeholder latency numbers (~120 ms, ~98 ms, ~41 ms). The author asked to replace them with qualitative signal bars to avoid misleading SLA claims.

From Sketch to Deployable Code

Claude outputs a self‑contained HTML file that uses only CSS (no JavaScript). Because Claude had already read HomeView.vue, it reused the existing class name .terminal-window and the defined color variables, making the merge straightforward: replace the template section and upgrade the styles.

The generated CSS respects performance guidelines: the typing effect uses clip‑path instead of width changes, the scan highlight moves with translateY, and a prefers-reduced-motion media query provides a static fallback for users who disable animations.

Review Finds Two Issues

Accessibility: the decorative terminal reads out phrases like "selecting best upstream" and "picked" on each animation loop, creating noise for screen‑reader users. Adding aria‑hidden to the container silences the narration.

Loop seam: the 9‑second animation resets with a sudden flash because opacity jumps from transparent to fully visible. Aligning the fade‑out keyframes to end at 0 % opacity and adding a brief fade‑in at the start smooths the transition.

Deployment Debugging

After deploying, the browser showed a dinosaur with ERR_INTERNET_DISCONNECTED. The author realized this error indicates a client‑side network issue, not a server failure, because a subsequent curl -I https://code80.ai/home returned HTTP/2 200. The problem was a temporary proxy outage, resolved by refreshing.

Conclusion

The new terminal animation now visually demonstrates code80’s intelligent routing: receiving a request, evaluating three upstream models, picking the best, routing to Claude, and returning the result. While the author could hand‑code such an effect, Claude Design saved time by reading the existing Vue component, preserving class names and color variables, and delivering ready‑to‑merge HTML/CSS without an intermediate design‑to‑code translation step. Future homepage updates will likely start with the same workflow: feed a screenshot and codebase to Claude Design, obtain several direction sketches, select the best, download the generated source, and integrate it back into the project.