When we started redesigning the Undrafted platform, the goal was not just to improve the homepage. We wanted to rethink how the entire product gets designed and built.

Undrafted covers a wide range of sports. From NFL and NBA to NCAA sports, motorsports, and soccer, the platform needs to organize a massive amount of editorial content while still feeling fast and readable.

But the bigger realization during this project was that the traditional design workflow was slowing everything down.

Normally the process looks like this:

Design mockups → developer handoff → rebuild in code → adjustments → rebuild again.

Each step introduces friction.

So instead of starting in a design tool, we decided to experiment with something different.

We built the entire layout using AI-driven design workflows powered by Claude and Paper.

Instead of opening Figma or Sketch, the first step in this project was simply talking through layout ideas with Claude.

We described things like:

• how sports categories should be organized • what the homepage hierarchy should look like • how to surface breaking news vs trending stories • how readers should scan content quickly

Claude then generated working HTML artifacts that represented these ideas.

Not wireframes. Not static mockups.

Actual layout code.

This meant we could immediately see if something worked or not.

Hero modules, article grids, navigation structures, and sidebars could all be adjusted in seconds.

The goal wasn't perfection. It was rapid exploration.

One of the biggest advantages of this approach was speed.

When working in traditional design tools, changing layout structure can take time. You move frames, adjust spacing, rebuild components.

With Claude generating HTML artifacts, iteration became incredibly fast.

We could quickly test things like:

• different hero story formats • editorial hierarchy for breaking news • how trending content should appear • newsletter placements • category navigation patterns

Instead of polishing visuals too early, we focused on getting the structure right first.

Once the layout felt strong, we moved to the next step.

After landing on a layout structure we liked, we used Claude's MCP integration to communicate directly with Paper's MCP server.

Claude sends the HTML structure to Paper, where it gets built inside Paper Canvas.

This is where things get interesting.

Paper doesn't treat designs like static artboards. It treats them like code-native layouts.

The system converts the layout into structured components with:

• reusable classes • design variables • spacing systems • responsive layout rules

Instead of recreating a design manually, the design gets constructed from the working code itself.

This dramatically reduces the usual design-to-development translation problems.

Because Paper builds designs as real code structures, the layout immediately behaves more like a production system.

Components are reusable. Styles are structured. Variables can be adjusted across the entire layout.

This is a huge shift from traditional design files where everything is essentially a visual approximation.

For Undrafted, this allowed us to start building a scalable editorial design system, not just a homepage.

The final step in the pipeline is exporting the Paper layout to Webflow, where the Undrafted site is built.

Because the design already exists as structured code, the export preserves:

• class naming systems • layout structure • reusable components • styling variables

This removes one of the biggest pain points in web design: translating a visual design file into real production code.

Instead of rebuilding everything from scratch, we start much closer to the final product.

The Undrafted design system is already taking shape inside Paper.

So far we have built:

• homepage layout • category pages • all-category index pages • article pages • article detail pages

We are currently working on tablet and mobile breakpoints, although we temporarily paused that work after hitting the MCP call limit during one of our build sessions.

Even with that limitation, the foundation of the platform is now structured and ready to scale.

This project ended up being about more than just redesigning a sports news layout.

It became an exploration of what design looks like in an AI-assisted workflow.

Instead of designing static visuals and handing them to developers, we are now working much closer to the final product from the beginning.

The pipeline now looks like this:

Idea → Claude ideation → HTML artifact → Paper Canvas → Webflow deployment

Each step moves us closer to production without unnecessary translation.

Adopting this workflow was not instant.

Learning how to structure prompts, manage MCP integrations, and move between tools required experimentation.

But once the process started clicking, it became clear that this approach unlocks a completely different level of iteration speed.

You spend less time polishing pixels and more time testing ideas and refining structure.

This project represents one of the biggest shifts in how I approach design.

AI tools like Claude are not replacing design thinking. They are accelerating exploration.

And tools like Paper make it possible to turn those ideas directly into structured, production-ready systems.

For Undrafted, that means we can evolve the platform faster as the content grows and the editorial team expands coverage.

For me as a designer, it feels like stepping into a new era of building products.

Less friction. More experimentation. Faster ideas.

And honestly, a lot more fun.