My Failed Attempts First

I'm an indie developer maintaining two side projects simultaneously. Starting last year, I tried using AI to generate frontend styling and animation code. The motivation was simple: I can't write animations, my CSS is mediocre at best, and AI seemed like the perfect way to fill that gap.

My first attempt: I wrote my requirement as a single sentence and threw it at the model: "Help me create an elegant entrance animation for my landing page." The AI was very cooperative, quickly outputting over a hundred lines of CSS and JS. I copied it into my project, ran it, and it did animate—but the animation lasted two seconds, the easing curve was bizarre, and it completely clashed with my existing design system. I asked it to fix things; it fixed them. Then when I asked for more changes, the earlier fixes broke again. After seven or eight rounds of back-and-forth, I realized I wasn't using AI—I was playing ping-pong with it, and I couldn't even claim authorship of the resulting code.

The second attempt was worse. I asked the AI to generate a full set of component styles, and it delivered a complete solution with its own design system—color variables, fonts, spacing, all invented by itself. Visually it wasn't ugly, but placed alongside the components already in my project, it looked like two products forcibly crammed onto one page. Tearing it out and rewriting it took longer than writing it by hand would have.

Looking back, the reasons for failure were consistent: I treated AI as a "one-shot" code generator, when it's actually better suited as a "prototype vendor that rapidly produces multiple candidate solutions." The value of prototyping lies in cheap trial and error, not in getting it right in one step.

Once I Changed My Approach, Things Went Smoothly

The correct approach is the reverse: instead of pursuing perfect code in one generation, have the AI produce batches of runnable candidate solutions under constraints, quickly weed out the failures in a browser, and only refine the surviving candidates.

My current workflow has five steps:

1. Set constraints before speaking. Write the project's existing design variables (primary color, fonts, spacing system, whether Tailwind is used) into the prompt, and explicitly forbid the AI from inventing its own design system.
2. Request three differentiated solutions at once. Force the AI to deliver three implementations with distinct stylistic directions, e.g., restrained, playful, and physics-based.
3. Require single-file runnability. Each solution must be a standalone file that can be saved as HTML and opened directly in a browser—judge the effect first, not the code.
4. Human filtering, AI refinement. After picking a direction, feed back the reasoning for the selection (what works, what doesn't) and iterate to convergence—usually two rounds suffice.
5. Integrate after finalizing. Have the AI rewrite the chosen solution as component code that conforms to the project's engineering standards, mapping variables to existing design tokens.

Under this workflow, AI's role shifts from "the person who writes code for me" to "the assistant who runs experiments for me." Keyframe animations I can't write? It gives me three versions at once. Not sure about a glassmorphism effect? Verify it in two minutes and toss it if it's not good—the cost of throwing it away is nearly zero. That's what prototype validation should look like.

Before and After Comparison

A rough estimate: validating motion prototypes for a product landing page used to take most of a day (including grinding through docs to write it myself), but now it takes under an hour from generation to final selection. More importantly, the number of explorations has increased: I used to dare try one direction per week; now I can compare five directions side by side in a single afternoon—quality in design decisions grows out of comparison, not out of the first AI response.

A Reusable Prompt Template

I keep this template saved in my editor snippets and only change the bracketed content each time:

你是一名资深前端动效工程师。请基于以下约束，为一个页面元素生成入场动效方案。

## 项目约束（必须遵守）
- 技术栈：[如 Tailwind CSS + 原生 CSS/React]
- 主色：[#xxxxxx]，辅色：[#xxxxxx]
- 字体体系：[如 Inter / 系统默认]
- 间距体系：[如 4px 基准]
- 禁止自创颜色、字体或引入新依赖库

## 目标
- 元素：[如 首屏标题 + 副标题 + CTA 按钮]
- 期望感受：[如 克制、专业、有一处记忆点]
- 总时长不超过 [1.5] 秒，尊重 prefers-reduced-motion

## 输出要求
1. 给出 3 个风格差异明显的方案：A 克制型 / B 活泼型 / C 层次感型
2. 每个方案输出为独立的单个 HTML 文件，可直接在浏览器打开预览
3. 每个方案末尾用 2-3 句话说明设计意图和适用场景
4. 不要输出解释性长文，代码为主

The three most critical mechanisms in this template: first, forbidding invented design systems, which closes the door on AI's "creative freedom"; second, three differentiated solutions, which forces comparison and puts the choice back in your hands; third, single-file runnability, which makes validation so fast there's zero psychological friction.

A Few Reminders

• Generated motion code is a prototype, not the final version. Before going to production, review performance (especially on mobile) and accessibility yourself.
• Models vary considerably across tasks. For visual tasks like animation, I recommend trying several models side by side rather than betting on a single one. Calling multiple models for comparison through an API gateway costs far less than subscribing to each individually—check the official pricing page for details.
• The prompt template itself needs iteration too. Every time I filter out unsatisfactory results, I add the failure patterns to the "forbidden" list. The template gets sharper with use.

Final Thoughts

The greatest value of AI for styling and animation isn't "writing it for you"—it's crushing the cost of trial and error to nearly zero, so you can be generous in direction-setting and cautious in engineering details. Once the direction is right, everything after gets easier.

If you're also building your own multi-model comparison workflow, check out ThisToken's API gateway service—register here: https://api.thistoken.ai/register

---

Tired of juggling provider integrations? Register at https://api.thistoken.ai/register and call every model through one base_url.