New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

Zhangzara Studio

Free

A striking HTML portfolio deck for design-led presentations.

by nexu-io84.9k stars on nexu-io/open-design
4 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Zhangzara Studio does

Zhangzara Studio is a carefully crafted HTML deck designed specifically for creative professionals looking to showcase their work in an impactful way. With a striking black canvas and electric-yellow typography, this portfolio-and-rate deck is tailored for photography studios, creative agencies, and brands that want to make a bold statement. The design system is cohesive, featuring a unique palette and decorative elements that enhance the visual experience while maintaining a professional appearance.

This skill is ideal for presenting studio credentials, pitching creative projects, or showcasing brand work in a way that captivates the audience. The deck consists of 12 slides, each designed to maintain a medium level of formality and density, making it suitable for a variety of contexts where a vibrant aesthetic is desired. Users are encouraged to utilize the provided templates without altering the core design elements, ensuring that the final presentation remains true to the original vision.

To use Zhangzara Studio, users simply clone the example HTML file and replace placeholder content with their own information, while adhering to the established design system. This includes maintaining the chosen fonts, colors, and layout structures. If additional content is needed, users can duplicate existing layouts or create new ones that align with the established design vocabulary. This adherence to the design system not only preserves the integrity of the deck but also reinforces the brand identity of the user.

Overall, Zhangzara Studio serves as an excellent tool for anyone in the creative field looking to elevate their presentation game. Its unique aesthetic and structured approach to design make it a valuable asset for those who want their presentations to reflect their brand's identity and creativity.

When to use it

Use this skill when you need to create a vibrant, design-led presentation for creative projects or brand showcases.

When not to use it

Avoid this skill for formal or institutional contexts where a subdued design is more appropriate.

What you can build with it

Photography Studio Pitch

Use the deck to present your photography portfolio to potential clients, showcasing your best work in a bold format.

Creative Agency Proposal

Present your agency's credentials and project ideas to clients, making a memorable impact with the striking design.

Brand Showcase

Highlight a fashion or sneaker brand's latest collection, using the deck to convey the brand's identity and aesthetic.

How to install Zhangzara Studio

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-zhangzara-studio --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Studio

Black canvas with electric-yellow type; high-voltage design studio aesthetic.

A single self-contained HTML deck — typography, palette, decorative system, and slide vocabulary are all tuned together. Mixing layouts across templates breaks the system; stay inside this one.

At a glance

  • Scheme: dark
  • Formality: medium
  • Density: medium
  • Slides in demo: 12

Best for

Anything that should feel electric and design-led: studio credentials, creative agency pitches, brand showcases, art-direction reviews, fashion / sneaker brand work. Also a striking unexpected choice for tech, research, or business decks where the speaker wants the deck to be a brand statement.

Avoid for

Contexts that should feel quiet or institutional — the black-and-electric-yellow palette is the loudest in the library.

Workflow

  1. Clone example.html into the user's workspace as the working file.
  2. Replace placeholder content with the user's real headlines, body copy, numbers, names, dates, and section labels. Match existing dimensions when swapping image placeholders.
  3. Preserve the design system. Never substitute fonts, recolor the palette, restructure the layout grid, or strip decorative elements (corner brackets, paper grain, geometric shapes, illustrated SVGs). They are part of the identity.
  4. Adjust deck length by duplicating layouts. If the user has more content than the demo holds, duplicate an existing slide of the most appropriate layout. If less, drop slides from the bottom. Update page-number labels.
  5. Designing missing layouts: if a slide needs a layout the template doesn't have, design it from scratch using the same fonts, palette, decorative vocabulary, spacing rhythm, and component grammar — never bail to a different template.
  6. Keep the navigation runtime as shipped. If the deck ships an assets/deck-stage.js or inline keyboard handler, leave it intact.

Output contract

Emit between <artifact> tags:

<artifact identifier="zhangzara-studio" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>

Source & license

Vendored from upstream MIT-licensed zarazhangrui/beautiful-html-templates.

The full upstream MIT license text — including the original copyright notice — ships in this skill at LICENSE and must be redistributed alongside any copy of example.html, template.json, or any vendored assets/ runtime. See template.json for the upstream metadata snapshot.

Frequently asked questions about Zhangzara Studio

Similar skills

PPTX HTML Fidelity Audit

Ensure your PPTX matches its HTML source perfectly.

HTML PPT Studio

Create professional HTML presentations effortlessly.

Humanize PPT

Transform raw material into presentation-ready outlines.

Replit Deck

Create visually cohesive decision decks with ease.

Open Design Landing Deck

Create engaging marketing decks with a magazine-style format.

Magazine Web Presentation

Create visually striking HTML presentations with ease.