Design Tools on KnightLi Blog

From PPT to Prototypes: Use Cases for Guizang PPT Skill and Huashu Design

Sat, 09 May 2026 08:34:23 +0800

Two design-oriented Agent Skills made by Chinese developers are worth looking at side by side: guizang-ppt-skill by Guizang, and huashu-design by Huashu.

They are not “design tools” in the traditional sense. Instead, they turn a design process, aesthetic preferences, checklists, and engineering templates into Skills that an Agent can execute. You are not opening a UI and slowly dragging elements around. You hand the requirement to an Agent such as Claude Code, Codex, or Cursor, and let it generate HTML, PPT, animation, or prototypes through a fixed workflow.

The value of these projects is not that they let AI improvise. It is that they turn “how to make this not look bad” into a repeatable process.

guizang-ppt-skill: focused on magazine-style web PPT

Guizang’s guizang-ppt-skill has a clear positioning: it generates single-file HTML, horizontally paged PPTs with a visual baseline of “digital magazine x e-ink.” It feels more like a layout system prepared for talks than a general-purpose design framework.

The repository README lists these core capabilities:

Single-file HTML output, with no build step or server required. Open it directly in a browser.
Horizontal page navigation, with support for keyboard, mouse wheel, touch swipes, bottom dots, and an ESC index.
5 preset theme palettes, including Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, and Dune.
10 page layouts, including opening cover, section divider, big-number data poster, text-left-image-right, image grid, Pipeline, suspense question, large quote, Before/After comparison, and mixed text-image layout.
Built-in templates, component notes, layout skeletons, theme configuration, and quality checklists.

It is suitable for offline sharing, internal industry talks, private salons, AI product launches, demo days, and presentation decks with a strong personal style. It is less suited to large tables, training courseware, or multi-person collaborative editing.

This project makes a good tradeoff: it does not try to cover every design scenario, but narrows itself to “magazine-style PPT.” Theme colors are chosen from presets, and layouts have clear skeletons. That actually reduces the chance of the Agent drifting off course.

If you often need to turn opinions, industry observations, or product launch content into a presentation deck, it can be highly practical.

The install command is straightforward:

`1`	`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill`

huashu-design: a fuller HTML-native design workflow

Huashu’s huashu-design has broader coverage. Its goal is not just to make PPTs, but to treat HTML as a native design canvas and let an Agent produce deliverable design assets.

The repository README lists these capabilities:

Clickable App or Web prototypes.
HTML slides, plus editable PPTX export.
Product launch animations, MP4, GIF, and versions with music.
Multiple design directions shown side by side for comparison.
Infographics, data visualizations, and PDF, PNG, SVG export.
5-dimensional expert review, covering philosophical consistency, visual hierarchy, execution craft, functionality, and innovation.

Its core idea is to let the Agent understand the brand and assets first, then produce high-fidelity design. The project emphasizes a Core Asset Protocol: when dealing with a specific brand, first confirm the logo, product images, UI screenshots, color palette, fonts, and brand guidelines instead of guessing from memory.

This matters. Many AI-generated designs look “like design,” but they do not look like a real product or brand. huashu-design tries to solve that problem up front: find real assets first, then design.

The install command is:

`1`	`npx skills add alchaincyf/huashu-design`

It is better suited to people who want to complete a fuller design delivery from the terminal: product prototypes, launch animations, presentations, infographics, and design reviews can all be handled inside one Agent workflow.

The biggest difference between the two

In simple terms, guizang-ppt-skill is a narrower and steadier presentation deck generator; huashu-design is a broader and more complete HTML-native design system.

If you only look at PPT:

guizang-ppt-skill emphasizes magazine feel, rhythm, layout, and single-file browser presentations.
huashu-design emphasizes general design capability, editable PPTX, brand assets, export paths, and review workflows.

If you look at overall design capability:

guizang-ppt-skill has clearer boundaries and is suitable for quickly making a stylish horizontal presentation.
huashu-design is more comprehensive and is suitable for breaking a product or brand design task into prototypes, animations, slides, and infographics.

These two projects also represent two different ways to write Skills. The former is like a highly constrained set of templates and aesthetic rules. The latter is like a workflow manual for a small design team.

Why this kind of Skill matters

A common problem with Agents is that they “can do it, but not consistently.” The same request may produce a strong result once, then drift into purple gradients, rounded cards, fake icons, and a pile of fancy-sounding empty copy the next time.

Skills are a way to add stability. They lock down things such as:

Reusable templates.
Executable checklists.
Clear aesthetic preferences.
Rules for avoiding common mistakes.
Output formats and validation flows.
When to ask questions and when to start directly.

This is far more reliable than simply writing “please make it look more premium.”

This is especially true for design tasks. Aesthetics cannot be reproduced reliably by a single prompt. What really helps is process: confirm assets first, decide the direction, build the structure, work on the visuals, then inspect the output. When this process is written as a Skill, the Agent becomes more like a collaborative executor rather than a one-shot image generator.

Usage recommendations

If you just want to turn a topic into an offline talk or sharing deck, try guizang-ppt-skill first. Its output boundary is narrow, and single-file HTML is also easy to distribute and preview.

If you want an Agent to take on a more complete design task, such as App prototypes, launch animations, branded slides, exportable PPTX, or infographics, look at huashu-design first. Its workflow is longer and better suited to tasks that need multiple rounds of iteration and exported deliverables.

If you are already writing your own Codex or Claude Code Skill, both projects are worth studying:

To learn “how to make a narrow scenario stable,” look at guizang-ppt-skill.
To learn “how to break a complex workflow into executable protocols,” look at huashu-design.

Summary

What Guizang and Huashu have in common is that both turn “design capability” from a one-time prompt into a repeatable process.

guizang-ppt-skill focuses on magazine-style HTML PPT and works well for highly stylized presentations. huashu-design focuses on an HTML-native design system covering prototypes, animations, slides, infographics, and reviews. The problem they solve is not “can AI generate design,” but “can AI generate deliverable design through a stable method.”

This may become an important type of open-source project in the Agent tooling ecosystem: not just code templates, but packaged human experience, aesthetics, and working methods as Skills.

Reference links:

How to Draw Dashed Lines, Arrows, Curves, and Change Canvas Size in AI

Fri, 08 May 2026 09:18:53 +0800

Here, AI refers to common vector design software, not artificial intelligence image generation.

Many beginners search for the same basic questions: how to draw dashed lines in AI, how to draw arrows, how to draw curves, and how to change canvas size. These are all basic operations, but the controls are spread across Stroke, Pen, Line Segment, and Artboard tools.

This guide organizes them in practical order.

How to Draw a Dashed Line in AI

In AI software, a dashed line is usually not a separate tool. It is created through the Stroke panel.

Steps:

Use the Line Segment Tool, Pen Tool, or Shape Tool to draw a line or path.
Select the line.
Open Window -> Stroke.
Check Dashed Line in the Stroke panel.
Set Dash and Gap values.

Common settings:

Dash: how long each solid segment is.
Gap: how much space appears between segments.
Stroke weight: controls the overall line thickness.

For a balanced dashed line, try:

1
2

Dash: 8
Gap: 8

For a dotted line, set the line cap to round and make the dash value very small:

1
2
3

Dash: 0
Gap: 8
Cap: Round

This makes the line look like a row of dots.

What If the Dashed Line Does Not Show

If checking dashed line does not visibly change anything, check:

Whether the object has a stroke color.
Whether the stroke weight is too small.
Whether the correct object is selected.
Whether Dash and Gap values are too small.
Whether the object only has fill and no stroke.

Many line problems are simply “the object has a path, but no stroke.”

How to Draw an Arrow in AI

Arrows are also usually added to a path through the Stroke panel.

Steps:

Draw a straight line with the Line Segment Tool.
Select the line.
Open Window -> Stroke.
Find Arrowheads near the bottom of the Stroke panel.
Choose an arrowhead style for the start or end point.
Adjust the arrowhead scale.

If the arrow points the wrong way, you can:

Move the arrowhead from the start point to the end point in the Stroke panel.
Use a path-direction command to reverse the path.

The simplest method is to draw the line again: drag from the tail toward the arrowhead. The endpoint will become the arrow direction.

How to Draw a Double-Headed Arrow

A double-headed arrow only needs arrowheads on both the start and end points.

Steps:

Select the line.
Open the Stroke panel.
Choose an arrowhead for the first arrowhead slot.
Choose an arrowhead for the second arrowhead slot.

If the arrowheads are too large or too small, adjust the Scale value.

In general, arrowhead size should match line weight. A thin line with huge arrowheads looks unbalanced; a thick line with tiny arrowheads is hard to read.

How to Draw a Curve in AI

The most common way to draw curves is the Pen Tool.

Basic method:

Select the Pen Tool.
Click once on the canvas to create the first anchor point.
At the second position, press and drag instead of only clicking.
Direction handles appear as you drag, creating the curve.
Continue clicking and dragging to build a continuous curve.

The key is simple: click for straight lines, click and drag for curves.

Many beginners cannot draw curves because they only click and never drag the direction handles.

How to Smooth a Curve

After drawing a curve, use these tools to adjust it:

Direct Selection Tool: select anchor points and move points or handles.
Anchor Point Tool: switch between corner points and smooth points.
Smooth Tool: make paths smoother.
Curvature Tool: create smooth curves more easily.

If you only want a natural curve, the Curvature Tool is easier for beginners than the Pen Tool. It does not require manually dragging many direction handles; clicking a few points can create a smooth path.

Draw Curves With the Curvature Tool

The Curvature Tool works more like “click points and let the curve follow.”

Steps:

Select the Curvature Tool.
Click the first point on the canvas.
Click the second point.
Click a third point, and the software creates a curve automatically.
Drag existing points to change the curve shape.

If you want a sharp corner, double-click a point to switch between a smooth point and a corner point.

For beginners, it is often easier to create the rough curve with the Curvature Tool, then fine-tune it with the Direct Selection Tool.

How to Change Canvas Size in AI

In AI, “canvas size” usually means artboard size. If you want to change export range, design size, or page size, change the artboard.

Steps:

Select the Artboard Tool from the toolbar.
Click the current artboard.
Enter width and height in the top properties bar.
You can also drag the artboard edges manually.

Common sizes:

WeChat cover: 900 x 383 px
Xiaohongshu cover: 1242 x 1660 px
Instagram square: 1080 x 1080 px
A4 paper: 210 x 297 mm

If your unit is not px, change units in the document or properties panel.

Change Size From the Artboards Panel

Besides the Artboard Tool, you can manage multiple artboards through the Artboards panel.

Steps:

Open Window -> Artboards.
Select the artboard you want to edit.
Click artboard options.
Enter width, height, and position.

If one file contains multiple pages, poster sizes, or export versions, the Artboards panel is clearer than dragging by hand.

Will Changing Artboard Size Affect Graphics

Changing only the artboard size usually does not automatically scale the graphics inside.

That means:

If the artboard gets larger, object sizes stay the same.
If the artboard gets smaller, object sizes still stay the same, but some content may fall outside the artboard.
Exports usually include only content within the artboard range.

If you want graphics to scale with the artboard, select the graphics and scale them manually, or use the Scale Tool or Transform panel.

Useful Shortcuts and Panels

Useful entry points:

Stroke panel: Window -> Stroke
Artboards panel: Window -> Artboards
Artboard Tool: Shift + O
Pen Tool: P
Direct Selection Tool: A

Different versions may have slightly different interfaces, but the core logic is the same: dashed lines and arrows are in Stroke, curves use path tools, and canvas size is changed through artboards.

Summary

To draw a dashed line in AI: select a path, check Dashed Line in the Stroke panel, and set dash and gap.

To draw an arrow in AI: draw a line, then add an arrowhead to the start or end in the Stroke panel.

To draw a curve in AI: use the Pen Tool to click and drag, or use the Curvature Tool for smoother beginner-friendly curves.

To change canvas size in AI: use the Artboard Tool or Artboards panel to edit artboard width and height.

Once you know these operations, most basic lines, flowcharts, annotation graphics, and page-size adjustments become manageable.