Instructions to use Tony1109/DesignAsCode-planner with libraries, inference providers, notebooks, and local apps. Follow these links to get started.

Libraries

How to use Tony1109/DesignAsCode-planner with Transformers:

# Use a pipeline as a high-level helper
from transformers import pipeline

pipe = pipeline("text-generation", model="Tony1109/DesignAsCode-planner")
messages = [
    {"role": "user", "content": "Who are you?"},
]
pipe(messages)

# Load model directly
from transformers import AutoTokenizer, AutoModelForCausalLM

tokenizer = AutoTokenizer.from_pretrained("Tony1109/DesignAsCode-planner")
model = AutoModelForCausalLM.from_pretrained("Tony1109/DesignAsCode-planner")
messages = [
    {"role": "user", "content": "Who are you?"},
]
inputs = tokenizer.apply_chat_template(
	messages,
	add_generation_prompt=True,
	tokenize=True,
	return_dict=True,
	return_tensors="pt",
).to(model.device)

outputs = model.generate(**inputs, max_new_tokens=40)
print(tokenizer.decode(outputs[0][inputs["input_ids"].shape[-1]:]))

Notebooks
Google Colab
Kaggle
Local Apps

vLLM

How to use Tony1109/DesignAsCode-planner with vLLM:

Install from pip and serve model

# Install vLLM from pip:
pip install vllm
# Start the vLLM server:
vllm serve "Tony1109/DesignAsCode-planner"
# Call the server using curl (OpenAI-compatible API):
curl -X POST "http://localhost:8000/v1/chat/completions" \
	-H "Content-Type: application/json" \
	--data '{
		"model": "Tony1109/DesignAsCode-planner",
		"messages": [
			{
				"role": "user",
				"content": "What is the capital of France?"
			}
		]
	}'

Use Docker

docker model run hf.co/Tony1109/DesignAsCode-planner

SGLang

How to use Tony1109/DesignAsCode-planner with SGLang:

Install from pip and serve model

# Install SGLang from pip:
pip install sglang
# Start the SGLang server:
python3 -m sglang.launch_server \
    --model-path "Tony1109/DesignAsCode-planner" \
    --host 0.0.0.0 \
    --port 30000
# Call the server using curl (OpenAI-compatible API):
curl -X POST "http://localhost:30000/v1/chat/completions" \
	-H "Content-Type: application/json" \
	--data '{
		"model": "Tony1109/DesignAsCode-planner",
		"messages": [
			{
				"role": "user",
				"content": "What is the capital of France?"
			}
		]
	}'

Use Docker images

docker run --gpus all \
    --shm-size 32g \
    -p 30000:30000 \
    -v ~/.cache/huggingface:/root/.cache/huggingface \
    --env "HF_TOKEN=<secret>" \
    --ipc=host \
    lmsysorg/sglang:latest \
    python3 -m sglang.launch_server \
        --model-path "Tony1109/DesignAsCode-planner" \
        --host 0.0.0.0 \
        --port 30000
# Call the server using curl (OpenAI-compatible API):
curl -X POST "http://localhost:30000/v1/chat/completions" \
	-H "Content-Type: application/json" \
	--data '{
		"model": "Tony1109/DesignAsCode-planner",
		"messages": [
			{
				"role": "user",
				"content": "What is the capital of France?"
			}
		]
	}'

Docker Model Runner
How to use Tony1109/DesignAsCode-planner with Docker Model Runner:
```
docker model run hf.co/Tony1109/DesignAsCode-planner
```

DesignAsCode Semantic Planner

The Semantic Planner for the DesignAsCode pipeline. Given a natural-language design request, it generates a structured design plan — including layout reasoning, layer grouping, image generation prompts, and text element specifications.

Model Details


Base Model	Qwen3-8B
Fine-tuning	Supervised Fine-Tuning (SFT)
Size	16 GB (fp16)
Context Window	8,192 tokens

Training Data

Trained on ~10k examples sampled from the DesignAsCode Training Data, which contains 19,479 design samples distilled from the Crello dataset using GPT-4o and GPT-o3. No additional data was used.

Training Format

Input: prompt — natural-language design request
Output: layout_thought + grouping + image_generator + generate_text

See the training data repo for field details.

Training Configuration


Batch Size	1
Gradient Accumulation	2
Learning Rate	5e-5 (AdamW)
Epochs	2
Max Sequence Length	8,192 tokens
Precision	bfloat16
Loss	Completion-only (only on generated tokens)

Usage

from transformers import AutoTokenizer, AutoModelForCausalLM
import torch

model_path = "Tony1109/DesignAsCode-planner"
tokenizer = AutoTokenizer.from_pretrained(model_path)
model = AutoModelForCausalLM.from_pretrained(
    model_path,
    torch_dtype=torch.float16,
    device_map="auto"
)

For full pipeline usage (plan → implement → reflection), see the project repo and Quick Start.

Outputs

The model generates semi-structured text with XML tags:

<layout_thought>...</layout_thought> — detailed layout reasoning
<grouping>...</grouping> — JSON array grouping related layers with thematic labels
<image_generator>...</image_generator> — JSON array of per-layer image generation prompts
<generate_text>...</generate_text> — JSON array of text element specifications (font, size, alignment, etc.)

Ethical Considerations

Designs should be reviewed by humans before production use.
May reflect biases present in the training data.
Generated content should be checked for copyright compliance.

Citation

@article{liu2026designascode,
  title     = {DesignAsCode: Bridging Structural Editability and 
               Visual Fidelity in Graphic Design Generation},
  author    = {Liu, Ziyuan and Sun, Shizhao and Huang, Danqing 
               and Shi, Yingdong and Zhang, Meisheng and Li, Ji 
               and Yu, Jingsong and Bian, Jiang},
  journal   = {arXiv preprint arXiv:2602.17690},
  year      = {2026},
  url       = {https://arxiv.org/abs/2602.17690}
}