Let's make it pretty
Use Claude plugins to steer your agent toward stronger frontend design, starting with the frontend-design plugin.
You already have a landing page that works. The aim is to make it feel intentional: typography, color, layout, and small details that read as designed instead of default. That applies whether your UI is React, Razor, Blazor, or something else, as long as the agent can edit markup and styles in your repo.
Plugins
Plugins extend what your agent can do without you pasting the same instructions every time. They bundle skills, prompts, or tool integrations so Claude Code (or the host you use) loads extra context when you need it. Think of them as a way to say: when I am working on X, assume these rules and references.
Install and enable plugins using your host’s documented plugin flow (for Claude Code, see the official docs; the exact steps can change as the product updates). Once a plugin is active, you can invoke it in natural language or it may attach automatically when your task matches what the plugin is for.
Claude frontend-design plugin
The frontend-design plugin for Claude is aimed at UI and visual work. It nudges the model toward more distinctive, production-minded interfaces: stronger typography choices, a clear color story, spacing that breathes, and backgrounds or motion that support the idea instead of generic purple gradients on white.
Use it when you want the agent to redesign or polish a screen (for example your Taskflow landing page) rather than only wire up markup. Typical prompts sound like: make the hero feel more editorial, tighten the feature cards, add a subtle texture or grid, fix hierarchy so the CTA is obvious.
What you get is not a magic theme. It is opinionated guidance baked into the session so the agent reaches for better patterns and explains tradeoffs. You still review the diff, run your usual dev command (npm run dev, dotnet watch, etc.), and decide what ships.
Try it
In Claude Code, send a message that updates the current page and invokes the plugin by name. The /frontend-design segment is a slash command: it attaches the frontend-design skill so the model follows that plugin’s design rules while it edits your project’s UI files. Use exactly:
Update the design of this page using /frontend-design.Add a line after that if you need a constraint, for example: Keep Blazor components and scoped CSS only or Stay on Tailwind, no new CSS framework.
More prompts you can drop in after the first pass:
Update the design of this page using /frontend-design. Same content order: hero → three benefits → how it works → footer. Goal: calmer palette, clearer type scale, more whitespace; no new dependencies.Using /frontend-design, tighten spacing and hierarchy on mobile for the feature cards only. Do not change copy or the hero.If the result is too loud or off-brand, send a smaller correction prompt. Plugins raise the floor; your taste still sets the ceiling.