Skip to main content
internal tool · claude skill · ux coe

Ascend Restyle — A Skill That
Redesigns Portfolio Decks On Its Own

A Claude Agent Skill built for an internal UX Center of Excellence: point it at a designer's existing portfolio or bio deck (PDF, PowerPoint, or Keynote export) and it restyles the whole thing into the firm's internal design system, then hands back an annotatable HTML preview so the designer can polish content before exporting a final PPTX or PDF.

context
Internal Tool · UX CoE
role
Creator · Skill Author
format
Claude Agent Skill
tested on
My own portfolio
49source pages restyled
4layout archetypes
7pipeline steps
0rounded corners
01 — Overview
Self-Initiated · UX CoE

The Problem: Every Designer's Deck Looks Different

Designers at the firm carry portfolio decks built up over years: different templates, different tools, different eras of personal style. Every time the UX CoE needed one presented internally or to a client, someone spent hours by hand rebuilding slides into the current brand system, one shape and font at a time.

Ascend Restyle exists to remove that hours-long manual step. It's not a proposal generator, and it doesn't score candidates against a brief. That's what the separate match / export-proposal skills do. This one is a one-to-one restyle: take a designer's own existing material, keep the content, replace the design.

02 — How It Works

A Seven-Step Restyle Pipeline

The skill is deliberately conservative about content. It never invents or rewrites what a slide says, only how it looks. Structure gets confirmed with the designer before any restyling begins.

STEP 1
Intake
Accepts the source file (PDF, PPTX, or a Keynote export).
STEP 2
Map the structure
Parses every slide/page and confirms the section map with the designer. It never assumes intent.
STEP 3
Restyle in the internal design system
Applies the real design tokens and hard design rules (chamfers, motion, type) to every element.
STEP 3.5
Layout-grid rules
Routes each slide into one of four layout archetypes based on its content density and image count.
STEP 4
Generate the HTML preview
Builds a single browsable preview of the full restyled deck.
STEP 5
Annotation / edit loop
The designer marks up the preview directly with an Agentation toolbar before anything is finalized.
STEP 6–7
Export & completion
Delivered as PPTX and/or PDF (via the pptx skill), or a quick in-browser print-to-PDF for a fast pass.
03 — Target Design System

Restyling Into the Internal Design System

This is the firm's design language for internal designer-facing material, distinct from client-facing brand work. The skill enforces its real tokens and a short list of hard rules rather than approximating a "similar-looking" theme.

Color tokens
Primary Blue
--ds-primary-100
Accent Orange
--ds-accent-100
Ink
--ds-neutral-600
Type system
Azurio — display headlines
Replica — sans / UI text
Roboto Mono — code & labels
Chamfer-clip corners, never border-radius
Circular status dots are the one exception
No drop shadows or glassmorphism
Motion: 120–220ms cubic-bezier(0.2,0.8,0.2,1)
Why chamfers, not rounded corners

The internal design system deliberately avoids the soft, rounded-corner look most decks default to. Chamfer-clipped polygons give it a sharper, more technical identity that reads as "internal engineering tool" rather than "marketing template," which matches how the UX CoE wants this material to feel.

04 — Real Usage

Run Against My Own Portfolio

The first real test of the skill was my own 49-page Keynote-exported portfolio PDF: Cover, About, Expertise, Experience, Competence Focus, a Portfolio index, seven full case studies, and a Closing section, all restyled in one pass.

Content correction, not just style

Two real content decisions came up mid-restyle: industry tags across my case studies weren't consistently named, so the skill flagged the inconsistency and we standardized the taxonomy together rather than silently restyling around a mislabeled slide.

A later pass rebuilt the layout engine itself around four grid archetypes driven by content density and image count, so dense case-study slides and sparse cover slides don't get forced into the same template. As of this writing, the preview is generated and the annotation pass is still in progress. That's the honest state of a tool built to be used, not just demoed.

05 — Stack & Tags

Built On

Claude Agent Skills
.skill packaging
HTML/CSS preview engine
Agentation annotation toolbar
pptx export skill
Internal design-system tokens
ai-tools design-systems automation internal-enablement ux-coe founder

Style shouldn't be the bottleneck

Content is the hard part. Restyling forty-nine slides shouldn't take longer than writing them did.

← Founder mode All work