Skip to main content

PENSIL AJAIB

Generate clear, consistent placeholder copy without leaving your design

PROJECT INFO

ROLE
DESIGN ENGINEER
YEAR
2025
TEAM
CLIENT
INA DIGITAL EDU

LINKS

In public service products, placeholder copy is not just a design inconvenience but it actively misleads stakeholders. When non-technical reviewers see lorem ipsum or generic labels in a government flow, they either skip feedback entirely or misread the product's intent. Either way, real decisions get delayed.

Pensil Ajaib is an internal Figma plugin I built to solve this for our team. It connects directly to a structured content guideline system maintained by Atika and content designers — and uses artificial intelligence to generate contextually appropriate copy suggestions based on the component type, audience, and product context. Instead of tab-switching across GitHub, Notion, and AI tools, designers get relevant copy suggestions without leaving Figma.

Our team was designing for public service products serving diverse audiences, including users with low digital literacy. The copy used in early-stage mockups significantly shaped how stakeholders understood the product, yet the process of finding appropriate copy was fragmented and inconsistent.

We had Ketik GPT (internal GPT) for better copy, but designers had to screenshot mockups, describe context externally, refine output, then paste back into Figma. Six steps. Too much friction.

  • How might we bring guideline aligned copy directly into Figma without tool‑switching?

  • How might we respect product and audience differences automatically so designers don't need to memorize rules?

  • How might we give content designers cleaner starting points instead of fixing messy placeholders?

I was responsible for the full engineering side of Pensil Ajaib, designing and building the Figma plugin from scratch, including the plugin architecture, the prompt structure, and the integration layer that reads from our GitHub-hosted content system. Atika led the content side: restructuring our copy guidelines into a machine-readable format, defining the taxonomy of product contexts and audience types, and maintaining the guideline system that the plugin queries.

This was a deliberate split because good plugin output required both strong engineering and well-structured content. Neither worked without the other.

Content System

Before building the plugin, Atika restructured our content guidelines from a flat, hard-to-navigate set of Markdown files into a structured system organized by tone, glossary, product, component, and audience type. Each guideline entry carries a unique ID, an audience context flag (e.g., low-literacy, general public, admin), and component-level copy examples.

Screenshot of a GitHub repository file browser showing the ‘pensil-ajaib-data’ project, with the ‘murid-tribe’ folder open and files such as glossary.md, icon.svg, and tribe.md listed.
Foldering structures for our markdown files

This structure is what makes the plugin's suggestions relevant rather than generic — the AI layer doesn't guess; it queries a real guideline set that our content team actively maintains. Getting this taxonomy right took multiple iterations before the suggestions became genuinely useful.

Screenshot of a GitHub page displaying a markdown document titled ‘Full Glossary Ruang Murid Reference,’ listing categorized features and types of learning materials with bullet points and icons.
Assign IDs to the references

Pensil Ajaib lives as a panel inside Figma. A designer selects a component, picks the product and audience context, and receives copy suggestions drawn from our guideline system. The interaction is intentionally minimal — the goal was to feel like an extension of the design environment, not an interruption.

The workflow went from 6 steps to 3:

  1. Select a component in Figma
  2. Set product + audience context in the panel
  3. Apply suggested copy

Behind the scenes, the plugin constructs a structured prompt from the selected context, queries, and filters the output against our guideline IDs so suggestions stay within the bounds of what our content team has approved.

Simple access control for internal use.

Designers first select which product and which audience they're designing for. This tells the plugin which guidelines to use.

Two onboarding screens for the ‘Pensil Ajaib’ tool: the first asks users to select their tribe, with ‘Murid’ selected, and the second asks who the writing is for, with ‘Guru’ selected and other role options listed.

Choose single layer, multiple layers, or full frame. Optional context field for extra details.

Plugin generates three aligned options, each with a short rationale explaining why (e.g. "uses official term X", "simplified for low‑literacy"). Designers can Apply one, Regenerate for new options, or Apply All.

We started with AI exploration using Nano Banana Pro to sketch mascot concepts quickly.

Black-and-white sketch illustrations of a pencil mascot in four action poses: running with a cape, sprinting forward, casting a magical effect, and standing confidently while holding a pencil.

Then worked with illustrator Adriansyah Mursalin to hand-draw the final version. We loved the cheeky expression and relaxed vibe.

Black-and-white sketch illustrations of a pencil mascot in four action poses: running with a cape, sprinting forward, casting a magical effect, and standing confidently while holding a pencil.

The mascot appears on lock screen, onboarding, and success states—keeping core screens clean while giving Pensil Ajaib a distinct personality.

Three illustrations of a pencil mascot in energetic action poses: jumping forward with a raised finger, running while holding a briefcase and flag, and standing confidently while holding a magnifying glass.

Workflow Change

Instead of a six-step cross‑tool workflow, designers now work in three steps:

  • Click a layer (or frame)
  • Open Pensil Ajaib, review three suggestions
  • Apply the one that fits best

What previously took 4–5 minutes per component now takes under 90 seconds, roughly a 60% reduction in copy-related task time. Across a typical session of 10–15 components, that's an estimated 30–45 minutes saved per designer per session. This makes it realistic to use guideline-aligned copy even in early, fast-paced exploration moments, not only at the end of the process.

Better Use of Content Designers

Because designs now start with better placeholders:

  • Content designers spend less time cleaning up inherited text
  • They can focus on narrative, structure, and clarity across flows
  • Product discussions in reviews can move from “change this word” to “does this flow serve the user?”
  • Cataloged UI components (button, label, toast, empty state, etc.) with clear specs and examples

In public service projects, this also helps stakeholders understand intent earlier and reduces misalignment that can ripple into policy or operational decisions.

More Grounded Starting Point for Copy Review

Pensil Ajaib doesn't replace the content review process, copywriters still review and refine all final copy. But starting from a contextually relevant placeholder is meaningfully different from starting from lorem ipsum.

The plugin gives the team a shared reference point earlier, so the review cycle begins from a more informed baseline rather than from scratch.

Building Pensil Ajaib reinforced something I havee come to believe strongly: developer tools and designer tools require the same care as end-user products. The people using this plugin are my own teammates — which meant I had to think carefully about cognitive load, context-switching cost, and how much configuration was "enough" versus "too much."

Questions that guided refinement:

  • Which guidelines are non‑negotiable (e.g. legal wording)?

  • Which can flex based on audience or component?

  • How much rationale is enough to build trust without slowing the designer down?

The most technically interesting challenge was structuring the prompt layer so that GPT outputs stayed useful without being unpredictable. Too much freedom and the suggestions drifted from our guidelines. Too rigid and the plugin felt like a lookup table, not an assistant. Finding that balance where the output felt intelligent but still governed was the core design and engineering problem.

Screenshot of an online meeting interface showing a shared whiteboard or design canvas with multiple slides and UI mockups, participant tiles listed on the right, and meeting controls along the bottom.
Multiple rounds of testing and iteration were needed to get that balance right.

The next step would be expanding the system to support more product contexts and eventually allowing content designers to update guideline entries directly from the Figma, closing the loop between writing, reviewing, and applying copy in one environment.